/* ---------------------------------------------------------------------------
   Canopi — marketing site.

   Forest green grounds the Canopi identity; a gold canopy stands for shelter.
   Warm document stock keeps client evidence readable within that setting.

   Colour discipline follows the app: gold is the only brand accent, and the
   vermilion appears exactly once, as a risk state, never as decoration.
   --------------------------------------------------------------------------- */
:root {
  --seal:        #0e2b22;
  --seal-deep:   #071710;
  --seal-lift:   #14392d;
  --parchment:   #f2ede1;
  --parchment-2: #e6dfcd;
  --ink:         #12211c;
  --ink-soft:    #46564e;
  --gold:        #c9a227;
  --gold-soft:   #e4cc7f;
  --on-seal:     #ece7d8;
  --on-seal-mute:#94a79c;
  --alert:       #e0705a;
  --rule:        rgba(236, 231, 216, .14);

  --measure: 62ch;
  --shell: 1180px;
  --step: clamp(72px, 9vw, 132px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--seal);
  color: var(--on-seal);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
.measure { max-width: var(--measure); }

/* --- Type roles ----------------------------------------------------------- */
.display {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
.ar {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  direction: rtl;
  /* Arabic letters join. Tracking pulls them apart and uppercasing means
     nothing in the script, so both are refused here rather than inherited from
     whatever label the text happens to sit inside. */
  letter-spacing: normal;
  text-transform: none;
}
.mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold);
}

/* --- Chrome --------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--seal) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.topbar .shell { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 25px; font-weight: 600; letter-spacing: -.04em; text-decoration: none; }
.brand svg { flex: none; color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  padding: 12px 22px; border-radius: 8px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-gold { background: var(--gold); color: var(--seal-deep); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-line { border-color: var(--rule); color: var(--on-seal); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* --- Hero: the join ------------------------------------------------------- */
/* The mechanism, not a screenshot. Two files, two scripts, one person — which
   is both the product's hardest trick and the reason the headline's fear is
   real: the designation is missed because the name was written differently. */
.hero { padding: clamp(64px, 9vw, 118px) 0 var(--step); position: relative; }
.hero-grid { display: grid; gap: clamp(48px, 6vw, 78px); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.02fr .98fr; } }

.hero h1 { font-size: clamp(38px, 5.6vw, 68px); }
.hero h1 .quiet { color: var(--on-seal-mute); display: block; }
.hero .sub { margin-top: 26px; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--on-seal-mute); max-width: 46ch; }
.hero .actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero .footnote { margin-top: 20px; font-size: 13px; color: var(--on-seal-mute); }

.join { position: relative; }
.plate {
  background: var(--parchment); color: var(--ink);
  border-radius: 3px; padding: 17px 19px;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.85), 0 2px 0 0 rgba(0,0,0,.2);
  position: relative;
}
.plate .ref { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: #7d8a83; }
.plate .name { font-size: clamp(19px, 2.2vw, 25px); font-weight: 600; letter-spacing: -.015em; margin-top: 5px; }
.plate .meta { margin-top: 9px; font-size: 12px; color: var(--ink-soft); }

.plate-a { transform: translateX(-14px); }
.plate-b { transform: translateX(14px); margin-top: 26px; }

.tie { position: relative; height: 54px; margin: 0 auto; width: 2px; }
.tie::before, .tie::after {
  content: ""; position: absolute; left: 50%; translate: -50% 0;
  width: 22px; height: 1px; background: var(--gold); opacity: .55;
}
.tie::before { top: 0; }
.tie::after { bottom: 0; }
.tie i {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(var(--gold), var(--gold-soft));
  transform-origin: top; transform: scaleY(0);
}
.tie b {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 9px; height: 9px; rotate: 45deg;
  border: 1px solid var(--gold); background: var(--seal);
  opacity: 0;
}

.verdict {
  margin-top: 26px;
  border: 1px solid var(--rule); border-inline-start: 2px solid var(--gold);
  padding: 15px 17px; background: rgba(236,231,216,.035);
  opacity: 0;
}
.verdict .line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 12.5px; }
.verdict .stamp {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.verdict .said { margin-top: 8px; font-size: 14px; color: var(--on-seal); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px;
  background: rgba(224,112,90,.14); color: var(--alert);
  border: 1px solid rgba(224,112,90,.32);
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .plate-a { animation: slidein .7s cubic-bezier(.2,.7,.3,1) .15s both; }
  .plate-b { animation: slidein .7s cubic-bezier(.2,.7,.3,1) .3s both; }
  .tie i   { animation: draw .5s ease-out 1.0s forwards; }
  .tie b   { animation: pop .3s ease-out 1.45s forwards; }
  .verdict { animation: rise .55s cubic-bezier(.2,.7,.3,1) 1.6s both; }
  @keyframes slidein { from { opacity: 0; transform: translateX(var(--from, 0)) translateY(16px); } }
  @keyframes draw { to { transform: scaleY(1); } }
  @keyframes pop  { to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  /* The end state is the point; skip the performance, keep the meaning. */
  .tie i { transform: scaleY(1); }
  .tie b, .verdict { opacity: 1; }
}

/* --- Sections ------------------------------------------------------------- */
.band { padding: var(--step) 0; border-top: 1px solid var(--rule); }
.band-head { max-width: 52ch; }
.band-head h2 { font-size: clamp(28px, 3.6vw, 44px); margin-top: 16px; }
.band-head .lede { margin-top: 20px; font-size: clamp(16.5px, 1.4vw, 18.5px); color: var(--on-seal-mute); }

.split { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; margin-top: clamp(38px, 5vw, 58px); }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (min-width: 940px) { .split.flip > :first-child { order: 2; } }

.gains { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 15px; }
.gains li { display: grid; grid-template-columns: 20px 1fr; gap: 13px; font-size: 16px; }
.gains svg { margin-top: 5px; color: var(--gold); }
.gains b { font-weight: 600; }
.gains span { color: var(--on-seal-mute); }

/* --- The WhatsApp thread -------------------------------------------------- */
.thread { display: flex; flex-direction: column; gap: 9px; }
.msg {
  max-width: 82%; padding: 10px 14px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.5;
  background: var(--seal-lift); color: var(--on-seal);
  border: 1px solid var(--rule);
}
.msg.me { align-self: flex-end; background: rgba(201,162,39,.1); border-color: rgba(201,162,39,.28); }
.msg .when { display: block; margin-top: 5px; font-size: 11px; color: var(--on-seal-mute); font-family: "IBM Plex Mono", monospace; }
.thread-note {
  margin-top: 18px; padding-top: 15px; border-top: 1px dashed var(--rule);
  font-size: 13.5px; color: var(--on-seal-mute);
}

/* --- The ledger ----------------------------------------------------------- */
.ledger { background: var(--parchment); color: var(--ink); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(0,0,0,.9); }
.ledger-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: var(--parchment-2);
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #6d7a72;
}
.row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 16px; border-top: 1px solid rgba(18,33,28,.08); }
.row .co { font-size: 14.5px; font-weight: 500; }
.row .who { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.tag {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; white-space: nowrap;
  background: #e3ece5; color: #1f6b4a;
}
.tag.hit { background: #f7e2dd; color: #a8382a; }
.row.struck { background: rgba(224,112,90,.07); }

/* --- Proof band ----------------------------------------------------------- */
.proof { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof > div { background: var(--seal); padding: 26px 24px; }
.proof h3 { font-size: 15.5px; font-weight: 600; margin-top: 14px; }
.proof p { margin-top: 8px; font-size: 14px; color: var(--on-seal-mute); }
.proof svg { color: var(--gold); }

/* --- Pricing -------------------------------------------------------------- */
.plans { display: grid; gap: 18px; margin-top: clamp(38px, 5vw, 54px); }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { border: 1px solid var(--rule); padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 14px; }
.plan.pick { border-color: var(--gold); background: rgba(201,162,39,.05); position: relative; }
.plan.pick::after {
  content: attr(data-pick); position: absolute; top: -1px; inset-inline-end: -1px;
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; background: var(--gold); color: var(--seal-deep);
  padding: 4px 10px;
}
.plan .tier { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.plan .price { font-family: "IBM Plex Serif", serif; font-weight: 600; font-size: 38px; letter-spacing: -.02em; line-height: 1; }
.plan .price small { font-family: "IBM Plex Sans", sans-serif; font-size: 14px; font-weight: 400; color: var(--on-seal-mute); letter-spacing: 0; }
.plan .incl { font-size: 14.5px; }
.plan .for { font-size: 13.5px; color: var(--on-seal-mute); padding-top: 13px; border-top: 1px solid var(--rule); margin-top: auto; }
/* Quoted rather than listed: the figure is a conversation, so it sits smaller
   than a number would. */
.plan .price.quote { font-size: 28px; letter-spacing: -.01em; }
[dir="rtl"] .plan .price.quote { font-family: "Amiri", serif; font-weight: 700; letter-spacing: normal; }
.plans-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.plans-foot p { font-size: 14.5px; color: var(--on-seal-mute); }

/* --- Close ---------------------------------------------------------------- */
.close { padding: var(--step) 0; border-top: 1px solid var(--rule); text-align: center; }
.close .canopi-mark { display: flex; justify-content: center; margin-bottom: 30px; color: var(--gold); opacity: .85; }
.close h2 { font-size: clamp(30px, 4.2vw, 50px); }
.close p { margin: 22px auto 0; max-width: 48ch; color: var(--on-seal-mute); font-size: 17px; }
.close .actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

footer { border-top: 1px solid var(--rule); padding: 34px 0 46px; }
footer .shell { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
footer p { font-size: 13px; color: var(--on-seal-mute); }
footer .ar { font-size: 13px; color: var(--on-seal-mute); }
footer a { color: inherit; text-underline-offset: 3px; }
footer a:hover { color: var(--gold); }

/* --- Legal pages ---------------------------------------------------------- */
.legal { padding: clamp(56px, 7vw, 96px) 0 var(--step); }
.legal .shell > * { max-width: 68ch; }
.legal h1 { font-size: clamp(32px, 4vw, 46px); margin-top: 16px; }
.legal .updated { margin-top: 14px; font-size: 13px; color: var(--on-seal-mute); }
.legal h2 { font-family: "IBM Plex Serif", serif; font-weight: 600; font-size: 21px; margin-top: 40px; }
[dir="rtl"] .legal h2 { font-family: "Amiri", serif; font-weight: 700; font-size: 24px; }
.legal p, .legal li { margin-top: 12px; font-size: 16px; color: var(--on-seal-mute); line-height: 1.65; }
.legal ul { padding-inline-start: 22px; margin-top: 4px; }
.legal a { color: var(--gold); text-underline-offset: 3px; }
.legal strong { color: var(--on-seal); font-weight: 600; }

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 640px) {
  .topbar .shell { flex-wrap: wrap; height: auto; min-height: 66px; padding-block: 10px; gap: 10px; }
  /* The plates are nudged apart on wide screens so the tie has something to
     span. Stacked in one column there is nothing to span, and the offset just
     breaks the left margin the rest of the page holds. */
  .plate-a, .plate-b { transform: none; }
  /* A licence number is one token. Tracking it out on a narrow plate pushes it
     onto a second line, and it breaks at its own hyphen — so the reference
     reads as two broken references. Tighten rather than wrap. */
  .plate .ref { letter-spacing: .06em; font-size: 10px; }
  .topbar .btn { padding: 10px 15px; font-size: 13px; }
  .msg { max-width: 92%; }
}

/* Scroll reveals, kept quiet: opacity and a few pixels, nothing that bounces. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* --- Arabic ---------------------------------------------------------------
   The Arabic page is the same stylesheet read the other way, plus a display
   face of its own. IBM Plex has no Arabic serif, so the authority the English
   page gets from Plex Serif comes here from Amiri, a naskh with the weight of
   something printed rather than typed. Body and interface stay Plex Sans
   Arabic, which keeps the pairing the same shape in both languages.
   -------------------------------------------------------------------------- */
[dir="rtl"] body {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
}
[dir="rtl"] .display {
  font-family: "Amiri", "IBM Plex Sans Arabic", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
  /* Arabic carries ascenders and dots above and below; 1.06 collides. */
  line-height: 1.32;
}
[dir="rtl"] .hero h1 { font-size: clamp(34px, 5vw, 60px); }

/* Labels holding Arabic give up the tracking and the uppercasing: Arabic
   letters join, and there is no case to raise. Labels that hold a licence
   number or a company name keep both, because those runs are still Latin. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .verdict .stamp,
[dir="rtl"] .tag,
[dir="rtl"] .chip,
[dir="rtl"] .plan .tier,
[dir="rtl"] .plan.pick::after {
  letter-spacing: normal;
  text-transform: none;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
[dir="rtl"] .plan .price small { font-family: "IBM Plex Sans Arabic", sans-serif; }

/* Prices, licence numbers and timestamps stay Latin and stay left to right,
   wherever they sit in an Arabic sentence. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.langswitch {
  font-size: 13px; color: var(--on-seal-mute); text-decoration: none;
  padding: 8px 12px; border: 1px solid var(--rule); border-radius: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.langswitch:hover { color: var(--gold); border-color: var(--gold); }
.topbar .shell .right { display: flex; align-items: center; gap: 10px; }