/* Mudeera website — hero section.
   Geometry mirrors the Figma frame "Desktop - Dark Version" (581:3637), node 581:3638,
   authored on a 1440px canvas. Values are the design's own, not invented. */

:root {
  /* The brand's three states and its surfaces, taken from the dashboard's own
     token file (mudeera-next-dashboard, src/app/globals.css), which derives
     them from the brand manual. These used to be values sampled off a
     screenshot by eye, which meant a photograph of the product never sat
     cleanly on the page. One source now, and the dashboard is it. */
  --sapphire: #4c8fdd;  /* watching */
  --violet: #bda5ed;    /* deciding, lightened for a dark ground */
  --emerald: #27c6a0;   /* acting */
  --canvas: 1440px;
  --ink: #111214;
  --paper: #fffffe;
  --ink-deep: #111214;
  --graphite: #252627;
  --hairline: rgba(255, 255, 255, 0.15);
  --hairline-soft: rgba(255, 255, 255, 0.1);
  --logo-grey: #a09f9f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

a { text-decoration: none; }

/* The design is drawn at a fixed 1440 canvas; centre it until the responsive
   pass is done so the comparison against Figma is honest. */
.page {
  width: var(--canvas);
  margin: 0 auto;
  background: var(--ink);
}

.hero {
  position: relative;
  width: var(--canvas);
  /* The lit plate runs 112px below the window, as Linear's does, and the logo
     band had to move clear of it. */
  height: 1548px;
  overflow: hidden;
  background: var(--ink);
}

/* ---------- background artwork ---------- */

/* Carried 6% past the canvas on the top and right. The pointer parallax moves
   this box up to 18px sideways and 12px down; at the designer's exact 935x752
   that slid the artwork off its own frame and left a straight cut down the
   right of the glass. The overhang absorbs the movement. */
.hero-art {
  position: absolute;
  top: -22px;
  right: -28px;
  width: 991px;
  height: 797px;
  mix-blend-mode: difference;
}

.hero-art-flip {
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
}

.hero-art-clip {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  overflow: hidden;
}

/* Exported from Figma node 3906:231 ("image 68") at 2x, which is the
   artwork's own 935x752, so it fills the box with no crop and no stretch. The
   old asset was a 3840-wide PNG squeezed into a different aspect ratio by
   hand, which is what made it look pulled. Re-export from that node if a
   different size or quality is ever needed. */
.hero-art-clip img {
  display: block;
  width: 100%;
  height: 100%;
}

.fade-bottom {
  position: absolute;
  top: 514px;
  right: 0;
  width: var(--canvas);
  height: 361px;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0) 0%, var(--ink) 64.404%);
}

/* Figma draws this as a 756x507 gradient rotated 90deg; the rotation resolves
   to a right-to-left fade across a 507x756 box. */
.fade-left {
  position: absolute;
  top: -4px;
  right: 428px;
  width: 507px;
  height: 756px;
  background: linear-gradient(to left, rgba(18, 18, 18, 0) 0%, var(--ink) 58.962%);
}

/* ---------- navigation ---------- */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 100px;
  z-index: 2;
}

.nav-left { display: flex; align-items: center; gap: 56px; }

.brand { display: flex; align-items: center; }

/* The brand's chrome lockup. The chrome material is raster-backed in the
   brand file, so this is a PNG; the matching white vector is kept alongside
   it purely as the silhouette the reflection is clipped to. */
.brand-logo {
  position: relative;
  display: block;
  width: 146px;
  height: 46px;
  background: url("assets/mudeera-logo-chrome.png") no-repeat center / contain;
}

/* The travelling reflection, clipped to the logo's own outline — the brand's
   motion specification calls for light crossing the silhouette, never the
   mark itself moving. */
.brand-sheen {
  position: absolute;
  inset: 0;
  -webkit-mask: url("assets/mudeera-logo-white.svg") no-repeat center / contain;
  mask: url("assets/mudeera-logo-white.svg") no-repeat center / contain;
  pointer-events: none;
}

.nav-links { display: flex; align-items: center; gap: 24px; }

.nav-link {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
}

.chev { width: 24px; height: 24px; flex: none; }

.nav-right { display: flex; align-items: center; gap: 12px; }

/* ---------- buttons ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  border-radius: 29px;
}

.btn-40 { height: 40px; }

/* Figma draws this stroke inside the frame, so it must not add to the box. */
.btn-ghost { box-shadow: inset 0 0 0 1.5px var(--hairline); color: #fff; }

.btn-solid { background: #fff; color: var(--ink); }

.btn-pr12 { padding-right: 12px; }

.btn-pr16 { padding-right: 16px; background: var(--paper); color: var(--ink-deep); }

.btn-round { border-radius: 99px; }

/* ---------- headline ---------- */

.hero-copy {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  z-index: 2;
}

.hero-text { display: flex; flex-direction: column; gap: 16px; }

/* The shared eyebrow aligns itself left inside a section; the hero is centred. */
.hero-eyebrow { align-self: center; margin-bottom: 8px; }

.hero-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 56px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2.24px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

/* The design sizes both the second headline line and the paragraph to the
   width of the first (non-wrapping) headline line, which is what produces the
   three-line break. */
.hero-title > span:last-child,
.hero-sub { width: min-content; min-width: 100%; }

.hero-sub {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.2px;
  text-align: center;
  color: #fff;
  opacity: 0.9;
}

.hero-actions { display: flex; align-items: flex-start; gap: 12px; }

/* ---------- product shot ---------- */

/* Linear's approach: the product sits straight on the page with a soft light
   behind it and runs off the bottom of the frame, so you are looking into
   software rather than at a picture of it. No device, no painting, no window
   chrome — each of those was a layer between the reader and the product. */

.showcase {
  --app-bg: #0f1114;
  --app-sunken: #0b0c0f;
  --app-surface: #181a1d;
  --app-raised: #1b1b1f;
  --app-line: rgba(255, 255, 255, 0.07);
  --app-line-2: rgba(255, 255, 255, 0.12);
  --app-text: #ececed;
  --app-dim: #9496a0;
  --app-faint: #8e9099;
  --app-violet: var(--violet);
  position: absolute;
  /* Linear leaves about 100px between the last line of copy and the top of the
     product shot. Ours started 32px under the buttons, which is what made the
     window feel like it was shoving the headline out of the way. */
  top: 568px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--canvas);
  height: 774px;
  overflow: visible;
}

/* The light the product sits in. Linear uses this instead of a backdrop. */
.showcase-light {
  position: absolute;
  left: 50%;
  top: -120px;
  width: 1500px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(60% 50% at 50% 38%, rgba(255, 255, 255, 0.07), transparent 70%);
  pointer-events: none;
}

/* Drawn at 1010 and scaled up, so every line of the interface grows together
   rather than the window merely showing more rows. */
.win {
  position: absolute;
  left: 50%;
  top: 0;
  /* Drawn at its real size. It used to be a 1010px window blown up 1.28x,
     which is why the product looked like a toy: every label rendered at 16px
     where the real dashboard uses 13px, and the screen held a third less than
     it should. Full size, so the density is the product's own. */
  width: 1240px;
  height: 658px;
  transform: translateX(-50%);
  transform-origin: top center;
  background: var(--app-bg);
  border: 1px solid var(--app-line-2);
  border-radius: 14px;
  overflow: hidden;
  /* Only the top edge highlight. Four stacked black drop shadows used to sit
     under this on the lit floor plate and read as a dirty smear rather than
     depth, because the plate is already brightest exactly where they were
     darkest. The lit plate is what separates the window from the page. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ---------- the app inside the window ---------- */

.app {
  display: grid;
  grid-template-columns: 212px 1fr;
  height: 100%;
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.45;
}

/* Named, not symbols. Linear's sidebar does quiet selling work while you
   read the rest of the screen; ours was six anonymous glyphs. Every entry
   here is a real section of the product. */
.rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  /* Two levels, as in the product and in Linear: the sidebar sits back, the
     work comes forward. One flat tone across both is what made the screen
     look like a drawing of an app rather than an app. */
  background: var(--app-sunken);
  border-right: 1px solid var(--app-line);
}

.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
  letter-spacing: -0.1px;
  color: var(--app-dim);
}

.rail-item b { font-weight: 400; }

.rail-item.is-on b { font-weight: 500; }

/* The one count the product actually shows in its rail. */
.rail-item em {
  margin-left: auto;
  padding: 4px 9px;
  line-height: 1;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-style: normal;
  color: var(--app-dim);
}

.rail-item svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.rail-item.is-on { background: var(--app-raised); color: var(--app-text); }

.app-main { display: flex; flex-direction: column; min-width: 0; }

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--app-line);
}

.app-top-name { display: flex; flex-direction: column; gap: 4px; }

.app-top-name em {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-faint);
}

.app-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(39, 198, 160, 0.12);
  color: var(--emerald);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
}

.app-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
  animation: live-pulse 2s infinite ease-in-out;
}

@keyframes live-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 8px var(--emerald); }
}

.app-top-name b { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }

.app-top-tools { display: flex; align-items: center; gap: 10px; }

/* The top bar was three grey blobs. A real search field, a real bell and a
   real initial cost nothing and stop the screen reading as a wireframe. */
.app-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--app-raised);
  box-shadow: inset 0 0 0 1px var(--app-line);
  font-size: 12.5px;
  color: var(--app-faint);
}

.app-search i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--app-faint); }

.app-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--app-dim); }

.app-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.app-me {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--app-raised);
  box-shadow: inset 0 0 0 1px var(--app-line-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--app-dim);
}

/* Placeholder marks. Bars stand in for lines of text, so they keep the same
   air between their ink as the words they replace. */
.ph { display: block; height: 7px; border-radius: 3.5px; background: rgba(255, 255, 255, 0.1); }

.ph-dim { background: rgba(255, 255, 255, 0.05); height: 6px; }

.ph-pill { height: 26px; border-radius: 13px; }

.ph-sq { width: 24px; height: 24px; border-radius: 7px; }

.ph-av { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }

/* The window is drawn at the product's own scale, not as a thumbnail, so its
   gutters are the product's: 16px inside any bordered surface, 24px at the
   window edge. The panel used to run on 9-13px padding, which reads as cramped
   at this size and was the first thing seen on the page. */
.app-body { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 0; flex: 1 0 0; min-height: 0; }

.sechead { display: flex; flex-direction: column; gap: 8px; }

.sechead b { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }

.sechead em { font-style: normal; font-size: 12.5px; color: var(--app-dim); }

.work {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1 0 0;
  min-height: 0;
  /* No card. The list and the decision are the screen, not a panel floating on
     it; a bordered box here put a third frame inside two that already existed.
     300px matches the queue column the product itself uses. */
  border-top: 1px solid var(--app-line);
  overflow: hidden;
}

/* ---------- the case list ---------- */

.cases { display: flex; flex-direction: column; border-right: 1px solid var(--app-line); min-width: 0; }

/* The named rows are real buttons: the shot is a working screen, so pressing
   one opens it. The placeholder rows below them are not. */
.case {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--app-line);
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  min-width: 0;
  transition: background 200ms ease;
}

button.case { cursor: pointer; }

button.case:hover:not(.is-on) { background: rgba(255, 255, 255, 0.035); }

button.case:focus-visible { outline: 2px solid var(--app-violet); outline-offset: -2px; }

.case.is-on { background: var(--app-raised); box-shadow: inset 2px 0 0 var(--app-violet); }

.av {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--app-raised);
  font-size: 11px;
  font-weight: 600;
  color: var(--app-dim);
}

.case.is-on .av, .detail-head .av { background: #26262c; color: var(--app-text); }

.case-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 0 0; }

.case-ph .case-l { gap: 9px; }

.case-l b { font-size: 12.5px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.case-l em { font-style: normal; font-size: 11.5px; color: var(--app-dim); letter-spacing: -0.1px; }

.case-t { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--app-faint); }

/* The selected row sits on a lighter surface, which eats the contrast the
   other rows have — measured at 4.27 against the 4.5 AA floor. */
.case.is-on .case-t { color: var(--app-dim); }

/* ---------- the selected case ---------- */

.detail { display: flex; flex-direction: column; gap: 16px; padding: 20px; min-width: 0; }

.detail-head { display: flex; align-items: center; gap: 10px; }

.detail-name { font-size: 15px; letter-spacing: -0.2px; }

/* Both status words share one cell and crossfade, so the pill never resizes
   or shoves the name beside it. */
.state {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  min-width: 120px;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--app-dim);
  transition: background 320ms ease, color 320ms ease, box-shadow 320ms ease;
}

.state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sapphire);
  box-shadow: 0 0 8px var(--sapphire);
  animation: state-pulse 2.2s infinite ease-in-out;
  flex: none;
}

/* The product shows a held decision in violet, under "Approval pending". The
   page was using an amber that belongs to no part of the brand. */
.state[data-held] { background: rgba(139, 99, 215, 0.2); color: var(--violet); }

.state[data-held] .state-dot {
  background: var(--violet);
  box-shadow: 0 0 8px var(--violet);
}

.state[data-approved] {
  background: rgba(39, 198, 160, 0.18);
  color: var(--emerald);
}

.state[data-approved] .state-dot {
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
}

@keyframes state-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.state-w { grid-area: 1 / 1; opacity: 0; white-space: nowrap; transition: opacity 320ms ease; }

.state-w.is-on { opacity: 1; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--app-line); }

.fact { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--app-surface); }

.fact em { font-style: normal; font-size: 11px; color: var(--app-faint); }

.fact b { font-size: 12.5px; font-weight: 400; letter-spacing: -0.1px; }

/* ---------- the recorded evidence ---------- */

.evidence { display: flex; flex-direction: column; gap: 3px; }

.evidence-l { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.3px; color: #7fd0a8; }

.trail { margin: 0; padding: 0; list-style: none; }

.trail li {
  display: grid;
  grid-template-columns: 14px 124px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

.trail li span { color: var(--app-faint); }

.trail li b { font-weight: 600; }

/* The brand's three states, from the dashboard's own token file: sapphire is
   watching, violet is deciding, emerald is acting. The page spends a section
   explaining that; the product shot has to show it. Violet is the dark-ground
   #bda5ed, not the true #8b63d7, which fails contrast here. */
.trail li[data-state="watching"] b,
.trail li[data-state="profiling"] b { color: var(--sapphire); }

.trail li[data-state="analyzing"] b,
.trail li[data-state="deciding"] b { color: var(--violet); }

.trail li[data-state="acting"] b,
.trail li[data-state="delivered"] b { color: var(--emerald); }

.trail li em { font-style: normal; color: var(--app-dim); }

/* ---------- the manager's verdict ---------- */

.verdict {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(143, 130, 221, 0.1);
  border-left: 2px solid var(--app-violet);
}

.verdict em { font-style: normal; font-size: 11px; color: var(--app-dim); }

.verdict p { margin: 0; font-size: 13px; line-height: 1.5; letter-spacing: -0.1px; }

/* ---------- the approval ---------- */

.decide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
}

.decide-cost { font-size: 12.5px; color: var(--app-dim); transition: color 240ms ease; }

.decide-cost b { font-weight: 600; color: var(--app-text); }

.decide-acts { display: flex; align-items: center; gap: 8px; }

.decide-acts button {
  font-family: inherit;
  font-style: normal;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 180ms ease;
  outline: none;
}

.decide-no {
  background: transparent;
  color: var(--app-dim);
  box-shadow: inset 0 0 0 1px var(--app-line-2);
}

.decide-no:hover {
  color: var(--app-text);
  background: rgba(255, 255, 255, 0.05);
}

.decide-no:active {
  transform: scale(0.97);
}

.decide-yes {
  background: var(--app-text);
  color: #15161a;
}

.decide-yes:hover {
  background: #fff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
}

.decide-yes:active {
  transform: scale(0.97);
}

.decide-check {
  display: none;
}

.decide.is-approved .decide-yes {
  background: var(--emerald);
  color: #0b0c0f;
  box-shadow: 0 0 16px rgba(39, 198, 160, 0.35);
}

.decide.is-approved .decide-check {
  display: block;
}

.decide.is-held-back .decide-no {
  background: rgba(189, 165, 237, 0.15);
  color: var(--violet);
  box-shadow: inset 0 0 0 1px rgba(189, 165, 237, 0.35);
}

.case.is-done .case-t::after {
  content: ' ✓';
  color: var(--emerald);
  font-weight: 600;
}

























/* ---------- the floor under the window ---------- */

/* Linear's measured values: a plate starting level with the top of the window,
   105px wider on each side, running 112px past its bottom; a vertical gradient
   holding the page colour to 10% then lifting to #d0d6e0 at the foot; and over
   that a radial, clear at the centre of the bottom edge and half the page
   colour at its limit, which keeps the light pooled under the product. */
.hero-floor {
  position: absolute;
  top: 568px;
  left: 50%;
  width: 1450px;
  height: 770px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(52.5% 57.5% at 50% 100%, rgba(15, 17, 20, 0) 0%, rgba(15, 17, 20, 0.5) 100%),
    linear-gradient(var(--ink) 10%, #d0d6e0 100%);
}

/* ---------- customer logos ---------- */

.logos {
  position: absolute;
  top: 1358px;
  left: 0;
  width: var(--canvas);
  height: 190px;
  overflow: hidden;
}

.logos-inner {
  position: absolute;
  top: 48px;
  left: 245.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.logos-label {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.2px;
  text-align: center;
  color: #fff;
  opacity: 0.5;
  white-space: nowrap;
}

.logos-row { display: flex; align-items: center; gap: 64px; }

/* Each wordmark is a one-colour alpha mask in the design, not a flat image, so
   the grey stays consistent across six differently-exported logos. Box sizes
   are the design's own measured ink boxes (Figma 581:3694..581:3709). */
.logo {
  display: block;
  flex: none;
  background: var(--logo-grey);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.logo-1 { width: 119px; height: 37.091px; -webkit-mask-image: url("assets/brand-1.png"); mask-image: url("assets/brand-1.png"); }
.logo-2 { width: 103px; height: 23.017px; -webkit-mask-image: url("assets/brand-2.png"); mask-image: url("assets/brand-2.png"); }
.logo-3 { width: 133px; height: 42px;     -webkit-mask-image: url("assets/brand-3.png"); mask-image: url("assets/brand-3.png"); }
.logo-4 { width: 100px; height: 21.146px; -webkit-mask-image: url("assets/brand-4.png"); mask-image: url("assets/brand-4.png"); }
.logo-5 { width: 100px; height: 21.146px; -webkit-mask-image: url("assets/brand-5.png"); mask-image: url("assets/brand-5.png"); }
.logo-6 { width: 74px;  height: 28px;     -webkit-mask-image: url("assets/brand-6.png"); mask-image: url("assets/brand-6.png"); }

/* ---------- section 2: why Mudeera ---------- */

/* Figma frame 581:3712: 1440 x 870, a 1240 inner column, the copy block 918
   wide, four 292 x 310 cards with 24 between them. */
.why {
  position: relative;
  width: var(--canvas);
  padding: 100px;
  background: var(--ink);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .035em;
  color: #aeb3ba;
}

.eyebrow i { flex: none; width: 18px; height: 1px; background: #8b929b; }

/* Figma: 32/24 padding, 16 radius, icon and text at opposite ends. The first
   card is deliberately lighter than the other three — measured from the
   rendered frames, not assumed. */
.card:first-child { background: #222; }

/* The icon sits in a dark well, inside a halftone field. The halftone is a
   WebGPU shader in Figma that no browser can run, so it is used here as the
   image Figma itself rendered, rebuilt as white dots on transparency. */
/* The resting field, always present so the mark never looks bare. */
/* The two travelling rings exist only when motion is welcome. Left at zero
   opacity they would be two images that never reach the screen. */
/* Figma: title 20/28 at -0.2, body 16/22 at -0.16 and 70% — and the pair sits
   as one block at the foot of the card. */
.card h3 {
  min-height: 56px;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: #fff;
}

.card p {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  letter-spacing: -0.16px;
  color: #fff;
  opacity: 0.7;
}

/* ---------- section 3: Mudeera at work ---------- */

/* Figma frame 581:3771: 1440 x 1635, a 1240 inner column, an 872-wide centred
   copy block, then a 2 x 2 grid of 619.5 cells separated by hairlines. */
.work3 {
  position: relative;
  width: var(--canvas);
  padding: 100px;
  background: var(--ink);
}

.work3-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 872px;
  margin: 0 auto;
  text-align: center;
}

.work3-h {
  margin: 0;
  font-size: 56px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2.24px;
  color: #fff;
}

.work3-sub {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: #fff;
  opacity: 0.7;
}

/* The 1px gaps are the dividers: the grid's own background shows through. */
.work3-grid {
  display: grid;
  grid-template-columns: 619.5px 619.5px;
  gap: 1px;
  margin-top: 56px;
  background: var(--hairline-soft);
}

.cell {
  display: flex;
  flex-direction: column;
  height: 549px;
  padding: 0 56px 48px;
  background: var(--ink);
}

/* The four panels now carry the content the headings claim, so the hatched
   placeholder is gone. Deliberately no container: cross-referencing the
   designer's own section (Figma 3906:430), his art floats on the section
   ground and each of the four is a different shape — a flow, a hub, a map, a
   report. Four bordered lists in a row is what made ours read as one thing
   repeated. */
.cell h3 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.6px;
  color: #fff;
}

/* Three lines' worth of room so every heading in a row starts at the same
   height, whatever the length of the text under it. */
.cell p {
  min-height: 72px;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: #fff;
  opacity: 0.6;
}

/* ---------- section 4: how Mudeera works ---------- */

.how {
  position: relative;
  width: var(--canvas);
  padding: 100px;
  background: var(--ink);
}

.how-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 824px;
  margin: 0 auto 44px;
  text-align: center;
}

.how-top .eyebrow { align-self: center; }

.how-h {
  margin: 0;
  font-size: 56px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2.24px;
  color: #fff;
}

.how-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: #fff;
  opacity: 0.6;
}

/* Cursor's shape: the four steps as one row of tabs, the open one's sentence
   underneath, and the product itself below at full width. It is the only way
   the screen can be drawn at the same size as the one in the hero. */
.how-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 1240px;
  margin: 0 auto;
}

.step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 20px 20px 20px 0;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #fff;
  transition: border-color 0.25s ease;
}

.step.is-on { border-top-color: #fff; }

.step-n {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #8b8b93;
}

.step b {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #8b8b93;
  transition: color 0.25s ease;
}

.step.is-on b { color: #fff; }

.step:hover b { color: #d6d6db; }

.step.is-on:hover b { color: #fff; }

.how-say {
  width: 1240px;
  margin: 4px auto 40px;
  font-size: 17px;
  font-weight: 300;
  line-height: 28px;
  color: #a7a7af;
}

.step:focus-visible { outline: 2px solid var(--app-violet); outline-offset: 6px; border-radius: 4px; }

/* The screen. Built at the dashboard's real size, then scaled into the
   designer's 681x600 frame, so the text stays sharp rather than resampled. */
.how-frame {
  /* The hero draws the same app at its real size. Anything else and the reader
     meets two different-sized versions of one product. */
  --how-scale: 1;
  position: relative;
  width: 1240px;
  height: 700px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--hairline-soft), 0 40px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.how-screen {
  --app-bg: #0f1114;
  --app-surface: #181a1d;
  --app-raised: #1b1b1f;
  --app-line: rgba(255, 255, 255, 0.07);
  --app-line-2: rgba(255, 255, 255, 0.12);
  --app-text: #ececed;
  --app-dim: #9496a0;
  --app-faint: #8e9099;
  /* Small text on the raised cards sits on a lighter surface, which eats the
     contrast the dimmer greys have elsewhere. Measured, not guessed. */
  --app-on-card: #a6a8b1;
  --app-violet: var(--violet);
  width: 1240px;
  height: 700px;
  transform: scale(var(--how-scale));
  transform-origin: top left;
}

/* The same named sidebar as the hero, at the same size. */
.app-wide { grid-template-columns: 212px 1fr; }

.how-work {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1 0 0;
  min-height: 0;
  gap: 16px;
}

.how-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* --- the left-hand working area, one shape per step --- */

.hlabel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 4px;
}

.hlabel em {
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--app-faint);
}

.hlabel b {
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 400;
  color: var(--app-dim);
}

.hrows { display: flex; flex-direction: column; gap: 6px; }

.hrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--app-raised);
}

.hrow .av { flex: none; }

.hrow-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.hrow-l b, .hrow-l em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hrow-l b { font-size: 13.5px; font-weight: 500; }

.hrow-l em { font-size: 12px; font-style: normal; color: var(--app-dim); }

.hrow-t {
  margin-left: auto;
  flex: none;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  color: var(--app-on-card);
}

.hrow-t.is-held { background: rgba(143, 130, 221, 0.18); color: #c3b9ff; }

.hrow-t.is-done { background: rgba(60, 170, 110, 0.16); color: var(--emerald); }

/* Someone the brief deliberately leaves out. */
.hrow-t.is-out { background: rgba(255, 255, 255, 0.04); color: var(--app-on-card); }

/* Step 1: the brief being written down. */
.brief {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
  background: var(--app-raised);
}

.brief-goal { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }

.brief-grid { display: grid; gap: 8px; }

.brief-f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.brief-f em {
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--app-on-card);
}

.brief-f b { font-size: 13.5px; font-weight: 400; }

/* Step 4: what it was worth. */
.out {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  background: var(--app-raised);
}

.out-big { font-size: 34px; font-weight: 500; letter-spacing: -1px; }

.out-big em { font-size: 14px; font-style: normal; color: var(--emerald); margin-left: 10px; }

.out-sub { font-size: 13px; color: var(--app-dim); }

.out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.out-f {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.out-f b { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; }

.out-f em { font-size: 11.5px; font-style: normal; color: var(--app-dim); }

/* --- the Manager chat, docked right --- */

.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-line);
}

.chat-who { display: flex; flex-direction: column; gap: 1px; }

.chat-who b { font-size: 13.5px; font-weight: 500; }

.chat-who em { font-size: 11.5px; font-style: normal; color: var(--app-faint); }

.chat-dot {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ea97b;
}

.chat-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 0 0;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}

.chat-q {
  align-self: flex-end;
  max-width: 85%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: var(--app-raised);
  font-size: 13.5px;
  line-height: 20px;
}

.chat-a {
  margin: 0;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--app-text);
}

.chat-a + .chat-a { margin-top: -4px; }

/* The one line in the chat that is the product's whole point. It carries the
   brand's violet as a tint and a hairline, not an accent bar down one side. */
.chat-note {
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(143, 130, 221, 0.28);
  background: rgba(143, 130, 221, 0.1);
  font-size: 12.5px;
  line-height: 19px;
  color: #c9c3f0;
}

.chat-acts { display: flex; gap: 8px; margin-top: auto; }

.chat-btn {
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  font-style: normal;
  color: var(--app-text);
}

.chat-btn.is-primary { background: #e9e9ec; color: #16161a; }

.chat-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--app-line);
}

.chat-field {
  flex: 1;
  padding: 9px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  color: var(--app-on-card);
}

.chat-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: var(--app-text);
}

.how-note {
  width: 820px;
  margin: 28px auto 0;
  font-size: 13px;
  color: #9a9aa2;
  text-align: center;
}

/* Linear closes each section with a quiet list of names, so nothing is
   missing from the page without needing a section of its own. */
.features {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  margin-top: 72px;
  padding: 32px 0 0;
  border-top: 1px solid var(--hairline-soft);
}

.features-l { font-size: 14px; color: #8b8b93; }

.features ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li { font-size: 15px; color: #e4e4e8; }

.features li i { font-style: normal; margin-left: 6px; color: #8b8b93; }

/* ---------- section 5: meet our agents ---------- */

.agents {
  position: relative;
  width: var(--canvas);
  padding: 100px;
  background: var(--ink);
}

.agents-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 852px;
  margin: 0 auto 44px;
  text-align: center;
}

.agents-top .eyebrow { align-self: center; }

.agents-h {
  margin: 0;
  font-size: 56px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2.24px;
  color: #fff;
}

.agents-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: #fff;
  opacity: 0.6;
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(2, 604px);
  gap: 32px;
  width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.agent {
  display: flex;
  flex-direction: column;
  padding: 32px 40px 40px;
  border-radius: 20px;
  background: #171717;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

/* The halo and the name badge are part of the portrait the brand file
   exports, so this is one image rather than three stacked layers. */
.agent-face { width: 100px; height: 100px; margin-bottom: 24px; }

.agent h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.44px;
  color: #fff;
}

.agent > p {
  margin: 0 0 24px;
  max-width: 508px;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: #a7a7af;
}

.agent-does {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.agent-does li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: #d7d7dc;
}

/* The designer's checkmark, drawn rather than shipped as six copies of the
   same 24px export. */
.agent-does li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 1.6px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1.6px solid rgba(255, 255, 255, 0.55);
  transform: rotate(-45deg);
}

.agent-repl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 14px;
  color: #9a9aa2;
}

.agent-repl img { width: 442px; height: auto; opacity: 0.85; }

.agent-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 12px 24px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 15px;
  color: #fff;
}

/* ---------- section 6: Mudeera on mobile ---------- */

.phone {
  position: relative;
  width: var(--canvas);
  padding: 100px 100px 120px;
  background: var(--ink);
}

.trust-top,
.faq-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  text-align: center;
}

.trust-top .eyebrow,
.faq-top .eyebrow { align-self: center; }

.trust-h,
.faq-h {
  margin: 0;
  font-size: 56px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2.24px;
  color: #fff;
}

.trust-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: #fff;
  opacity: 0.6;
}

/* The handset. Drawn rather than photographed, so it stays sharp and weighs
   nothing. Its size is derived from the screenshots (390x844, a real iPhone)
   rather than chosen: any other ratio crops the app's own tab bar off the
   bottom, which is exactly what it was doing. */
.device {
  position: relative;
  width: 328px;
  height: 689px;
  padding: 9px;
  border-radius: 44px;
  background: linear-gradient(160deg, #3a3a40, #121214 36%, #202024);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 50px 90px rgba(0, 0, 0, 0.6);
}


.device-screen {
  display: block;
  width: 310px;
  height: 671px;
  border-radius: 34px;
}


/* ---------- section 7: trusted by companies ---------- */

.trust {
  position: relative;
  width: var(--canvas);
  padding: 100px 0 120px 100px;
  background: var(--ink);
  overflow: hidden;
}

.trust-top { width: 852px; margin-bottom: 64px; margin-left: 194px; }

/* Four 399-wide cards in a 1240 column: the fourth runs off the right edge,
   which is how the design shows there are more than fit. */
.trust-row {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tcard {
  position: relative;
  flex: none;
  width: 399px;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

.tcard-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

/* The photograph is only a texture; the words have to stay readable over it. */
.tcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.45) 0%, rgba(10, 10, 11, 0.82) 46%, #0a0a0b 72%);
}

.tcard-logo,
.tcard p { position: relative; z-index: 1; }

.tcard-logo {
  display: block;
  margin: 43px 0 0 32px;
  background: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.tcard p {
  margin: 0;
  padding: 0 32px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: #e4e4e8;
}

/* ---------- section 8: frequently asked questions ---------- */

.faq {
  position: relative;
  width: var(--canvas);
  padding: 100px 312px 120px;
  background: var(--ink);
}

.faq-top { width: 816px; margin-bottom: 64px; }

.faq-list { width: 816px; }

/* Native disclosure: keyboard, screen readers and find-on-page all work with
   no script behind them. */
.qa {
  border-bottom: 1px solid var(--hairline-soft);
}

.qa summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.18px;
  color: #fff;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hairline);
  background: no-repeat center / 12px 12px url("assets/chev-white.svg");
  transition: transform 260ms ease;
}

.qa[open] summary::after { transform: rotate(180deg); }

.qa summary:focus-visible { outline: 2px solid var(--app-violet, var(--violet)); outline-offset: 4px; }

.qa p {
  margin: 0;
  padding: 0 56px 24px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: #a7a7af;
}

.faq-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 816px;
  margin: 40px 0 0;
  padding: 18px 24px;
  border-radius: 14px;
  background: #171717;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  font-size: 15px;
  color: #a7a7af;
}

.faq-more a { color: #fff; }

/* ---------- section 9: the closing ask ---------- */

.close {
  position: relative;
  width: var(--canvas);
  padding: 0 24px 0;
  background: var(--ink);
}

.close-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 100px 100px 112px;
  border-radius: 28px;
  text-align: center;
  /* The brand's own material: dark glass lit from above. */
  background:
    radial-gradient(70% 120% at 50% -10%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(180deg, #1a1a1d, #0d0d0f);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

.close-eyebrow {
  font-size: 13px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #9a9aa2;
}

.close-h {
  margin: 0;
  font-size: 56px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2.24px;
  color: #fff;
}

.close-sub {
  max-width: 722px;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  color: #fff;
  opacity: 0.65;
}

.close-acts { display: flex; gap: 16px; margin-top: 16px; }

.close-acts .btn { height: 48px; }

/* ---------- the footer ---------- */

.foot {
  width: var(--canvas);
  padding: 96px 100px 40px;
  background: var(--ink);
}

.foot-top {
  display: grid;
  grid-template-columns: 408px 1fr;
  gap: 80px;
  padding-bottom: 56px;
}

.foot-brand .brand-logo { margin-bottom: 24px; }

.foot-brand p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: #8b8b93;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.foot-cols > div { display: flex; flex-direction: column; gap: 14px; }

.foot-cols h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7e7e87;
}

.foot-cols a { font-size: 15px; color: #d7d7dc; }

.foot-cols a:hover { color: #fff; }

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 14px;
  color: #8b8b93;
}

.foot-legal { display: flex; gap: 28px; }

.foot-legal a { font-size: 14px; color: #8b8b93; }

.foot-legal a:hover { color: #fff; }

/* ---------- the four illustrations in "what she actually does" ---------- */

/* The designer drew an agent roster and a tool diagram here, but the words
   changed: these now show ranking and spending, which is what the copy
   claims. Built live rather than drawn, so they stay sharp and weigh nothing. */
/* 1 — one sentence in, a written brief back */

/* A panel inside a panel is noise. The brief is separated from the sentence
   above it by a rule and some air, which does the same job with less. */
/* 2 — who is worth the money */

/* 3 — something real attached, inside a ceiling */

/* 4 — the money back */

/* A list of what was actually spent, or actually recovered. One line is a
   claim; three is a habit. */
/* ---------- section 2: why Mudeera ---------- */

/* Left, not centred. Every heading on this page was centred, which is what
   made the sections read as interchangeable however good each one was.
   Pattern borrowed from Ciuslabs: the claim holds the left, the right carries
   facts under labels rather than a second paragraph of marketing. */
.why-top {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 80px;
  align-items: start;
  padding-bottom: 72px;
}

.why-say { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }

.why-h {
  margin: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: -1.9px;
  color: #fff;
}

.why-facts { display: flex; flex-direction: column; gap: 0; margin: 10px 0 0; }

.why-facts > div {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline-soft);
}

.why-facts > div:last-child { border-bottom: 1px solid var(--hairline-soft); }

.why-facts dt {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  line-height: 24px;
  color: #7e7e87;
}

.why-facts dd {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: #ececed;
}

/* The four reasons: numbered, no icons. The icons were decoration; the number
   tells you how many there are and where you are. */
.why-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--hairline-soft);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 32px 44px;
  background: var(--ink);
}

.card-n {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.2px;
  color: #9a9aa2;
}

.card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: #fff;
}

.card p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 24px;
  color: #a7a7af;
}

/* A measuring rule along the foot of the section. The brand book calls the
   mark "exact geometry"; this is the page saying the same thing quietly, and
   it ties the opening to everything after it. */
.rule {
  height: 22px;
  margin-top: 72px;
  border-top: 1px solid var(--hairline-soft);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 120px 11px, 24px 6px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
}

/* ---------- section 6: Mudeera on mobile ---------- */

.phone-say { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }

.phone-h {
  margin: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 58px;
  letter-spacing: -1.9px;
  color: #fff;
}

/* The argument on the left, the object on the right. The phone used to sit in
   the middle of the section proving only that an app exists. */
.phone-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 90px;
  align-items: center;
  margin-top: 72px;
}

.phone-list { margin: 0; padding: 0; list-style: none; }

.phone-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 20px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline-soft);
}

.phone-list li:last-child { border-bottom: 1px solid var(--hairline-soft); }

.pl-n {
  grid-row: span 2;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.2px;
  line-height: 28px;
  color: #9a9aa2;
}

.phone-list h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.44px;
  color: #fff;
}

.phone-list p {
  margin: 0;
  max-width: 540px;
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
  color: #a7a7af;
}

/* Words quoted straight off the screen beside it, so the claim and the proof
   are the same sentence. */
.phone-list em { font-style: normal; color: #ececed; }

.device { justify-self: center; }

/* --- panel 3: a hub, not a list ---
   Cross-referencing the designer's section (Figma 3906:430) against ours: his
   four panels are four different shapes — a flow, a radial, a connection map,
   a report card. Ours were four lists in boxes, which is what made the row
   read as one repeated thing. These two now carry their own shape. */
/* The connectors. Drawn, so there is no diagram image to load. */
/* --- panel 4: a report, which is the thing she produces --- */
/* A line that rises is the one shape a shop owner reads without being told
   what it is. */
/* ---------- the four figures in "what she actually does" ---------- */

/* These are concept panels, not product shots. Filling them with lists and
   numbers was a category error: a product shot has to be real and dense to be
   believed, a concept panel has to be a drawing or it just looks busy. Linear
   runs the same section at roughly a twentieth of the ink. Same hand as the
   opening — white hairlines on black. */
.fig {
  display: block;
  margin-bottom: 18px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #8f9099;
}

.fig-art {
  display: block;
  flex: 1 0 0;
  width: 100%;
  max-height: 232px;
  margin-bottom: 28px;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The parts that are context rather than subject. */
.fig-art .dim { stroke: rgba(255, 255, 255, 0.18); }

.fig-art .cap {
  stroke: none;
  fill: #8f9099;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
}