/*
 * Corteks site: the layer the mockup did not have.
 *
 * The prototype is styled entirely inline and carries no media queries at all,
 * so this file does two things and deliberately not a third: it supplies the
 * behaviour classes the markup now needs, and it adds the breakpoints. It does
 * not restyle anything. Every rule below either targets a class this build
 * introduced, or overrides one specific inline declaration under a breakpoint,
 * which is why the selectors match on [style*=...].
 *
 * That looks odd and is the point: above the breakpoint nothing here applies,
 * so the desktop rendering is byte for byte the design Sanad approved. Mobile
 * is the only place this file has an opinion.
 */

/* ------------------------------------------------------------- behaviour */

/*
 * The capture demo's states. `hidden` alone loses to the inline `display:flex`
 * on these blocks, which is why this is !important rather than tidy.
 */
/*
 * `display: contents` is load-bearing, not tidiness.
 *
 * In the prototype each state was an <sc-if>, which renders no box at all. The
 * conversion replaced those with real divs, and that quietly broke the capture
 * orb: its glow and its two rings are `position: absolute` with a size but no
 * top/left, so they sit at their static position, which was centred inside the
 * flex parent. Wrapping them in a div made the div their static-position
 * parent, and the rings drifted off the orb.
 *
 * `display: contents` puts the children back in the parent's layout as if the
 * wrapper were not there, which is what <sc-if> did. The wrapper still exists
 * for `hidden` to switch, and `hidden` has to beat it, hence the !important.
 */
.cz-state {
  display: contents;
}

[data-state][hidden] {
  display: none !important;
}

/* The hero photograph, which replaced the design tool's image placeholder. */
.cz-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Wrappers added around the email fields so Enter and autofill work. */
.cz-waitlist {
  margin: 0;
  display: contents;
}

.cz-note {
  margin-top: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.cz-note[data-ok='yes'] {
  color: #DDD6FE;
}

.cz-note[data-ok='no'] {
  color: #F9A8D4;
}

/* Keyboard focus, which inline styles removed along with the outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid #C4B5FD;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Nothing may push the page sideways. The one rule most likely to save a phone. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
canvas,
svg,
video {
  max-width: 100%;
}

/* ------------------------------------------------------- reduced motion */

/*
 * The page leans on long looping keyframes for its atmosphere. Under reduced
 * motion they stop, rather than being shortened: the request is for stillness,
 * not for the same movement in less time.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------- hovers */

/*
 * The mockup expressed hover with a style-hover attribute, which browsers
 * ignore, so every hover was dead on arrival. These are those declarations,
 * transposed. Focus-visible is included because a hover that keyboard users
 * cannot reach is half a control. Regenerated by build.py on every import.
 */
.czh-1:hover, .czh-1:focus-visible { color: #FFFFFF; }
.czh-2:hover, .czh-2:focus-visible { color: #FFFFFF; }
.czh-3:hover, .czh-3:focus-visible { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); color: #FFFFFF; }
.czh-4:hover, .czh-4:focus-visible { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.34); color: #FFFFFF; }
.czh-5:hover, .czh-5:focus-visible { transform: translateY(-5px); border-color: rgba(52,211,153,0.46); }
.czh-6:hover, .czh-6:focus-visible { transform: translateY(-5px); border-color: rgba(96,165,250,0.46); }
.czh-7:hover, .czh-7:focus-visible { transform: translateY(-5px); border-color: rgba(252,211,77,0.46); }
.czh-8:hover, .czh-8:focus-visible { transform: translateY(-5px); border-color: rgba(244,114,182,0.46); }
.czh-9:hover, .czh-9:focus-visible { background: rgba(167,139,250,0.15); color: #FFFFFF; }
.czh-10:hover, .czh-10:focus-visible { background: rgba(167,139,250,0.15); color: #FFFFFF; }
.czh-11:hover, .czh-11:focus-visible { background: rgba(167,139,250,0.15); color: #FFFFFF; }
.czh-12:hover, .czh-12:focus-visible { background: rgba(255,255,255,0.035); }
.czh-13:hover, .czh-13:focus-visible { background: rgba(255,255,255,0.035); }
.czh-14:hover, .czh-14:focus-visible { background: rgba(255,255,255,0.035); }
.czh-15:hover, .czh-15:focus-visible { background: rgba(255,255,255,0.035); }
.czh-16:hover, .czh-16:focus-visible { background: rgba(255,255,255,0.035); }
.czh-17:hover, .czh-17:focus-visible { background: rgba(255,255,255,0.035); }
.czh-18:hover, .czh-18:focus-visible { background: rgba(255,255,255,0.035); }
.czh-19:hover, .czh-19:focus-visible { background: rgba(255,255,255,0.035); }
.czh-20:hover, .czh-20:focus-visible { background: rgba(255,255,255,0.035); }
.czh-21:hover, .czh-21:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 38px rgba(167,139,250,0.45); }
.czh-22:hover, .czh-22:focus-visible { color: rgba(255,255,255,0.6); }
.czh-23:hover, .czh-23:focus-visible { color: rgba(255,255,255,0.6); }
.czh-24:hover, .czh-24:focus-visible { color: rgba(255,255,255,0.6); }

/* ----------------------------------------------------------- legal pages */

/*
 * Privacy, Terms and the deletion page. These are read, not admired, so they
 * are one column of high-contrast text on the same dark canvas rather than a
 * second design. Measure is capped near 70 characters because that is where
 * long-form prose stops being work to read.
 */
.cz-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 22px 120px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.74);
}

.cz-doc h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0 0 10px;
}

.cz-doc h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 46px 0 12px;
}

.cz-doc h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #DDD6FE;
  margin: 30px 0 8px;
}

.cz-doc p, .cz-doc li { margin: 0 0 14px; }
.cz-doc ul { padding-left: 20px; margin: 0 0 18px; }
.cz-doc strong { color: #FFFFFF; font-weight: 500; }
.cz-doc code {
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
}
.cz-doc a { color: #C4B5FD; }
.cz-doc a:hover { color: #DDD6FE; }

.cz-doc .cz-updated {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 34px;
}

/* The lead paragraph, which is the summary somebody skims before deciding. */
.cz-doc .cz-lead {
  font-size: 17.5px;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.86);
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  background: rgba(167, 139, 250, 0.07);
}

.cz-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}

.cz-doc th, .cz-doc td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  vertical-align: top;
}

.cz-doc th { color: #FFFFFF; font-weight: 500; white-space: nowrap; }

/* Back to the site, on every legal page, because these are often entered cold
   from a store listing rather than from the site itself. */
.cz-docnav {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 22px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13.5px;
}

.cz-docnav a { color: rgba(255, 255, 255, 0.5); }
.cz-docnav a:hover { color: #FFFFFF; }

.cz-docfoot {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px 80px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.28);
}


/* ------------------------------------------------------------- the graph */

/*
 * On the site the graph is a picture, not a toy (Sanad, 2026-08-08). It keeps
 * drawing and animating; it just does not take input.
 *
 * The obvious reason is that nobody came here to rotate a graph. The better one
 * is mobile: a canvas that claims drag gestures sits inside a page people
 * scroll through, so on a phone a swipe over it rotates the graph instead of
 * moving the page, and the section becomes a dead spot you have to scroll
 * around. Refusing pointer events hands every gesture back to the page.
 *
 * The "drag to rotate, scroll to zoom" hint the component appends is hidden by
 * the same decision, via density="compact" set in site.js.
 */
mind-graph,
mind-graph-nova {
  pointer-events: none;
  touch-action: pan-y;
}


/* -------------------------------------------------- mobile: handled upstream */

/*
 * There are no mobile overrides here, deliberately.
 *
 * Every rule that used to sit in this space (the capture block's position and
 * row layout, the panel box-sizing, the hero CTA removal, the orb's flex
 * sizing) is now composed by the design itself, in the export's own
 * `@media (max-width: 860px)` block. Three attempts to place the capture block
 * by hand each made it worse; the design tool places it correctly.
 *
 * Standing instruction from Sanad: do not add hero overrides here. If mobile
 * looks wrong, the fix belongs in the Claude Design project and arrives with
 * the next export, not in this file.
 *
 * Removed 2026-08-08 when that revision landed.
 */