/* Clauseworks brand (SPEC §7): Fraunces display + Manrope UI, warm paper base,
   deep navy structure, report RAG colours. Calm, editorial, document-led. */

:root {
  --paper:   #f4efe6;   /* warm paper base            */
  --paper-2: #fbf8f2;   /* cards / raised surfaces     */
  --navy:    #16263f;   /* deep navy — headings, nav   */
  --navy-2:  #24395a;
  --ink:     #23211c;   /* body text                   */
  --muted:   #5b5446;   /* secondary text (AA on paper)*/
  --line:    #e2dac9;   /* hairlines / borders         */

  --green:   #2e7d5b;   /* RAG green  */
  --amber:   #9a5f12;   /* RAG amber (AA text)         */
  --red:     #b23a38;   /* RAG red    */

  --radius: 10px;
  --maxw: 1040px;
  --shadow: 0 1px 2px rgba(22,38,63,.06), 0 6px 20px rgba(22,38,63,.06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  color: var(--navy);
  line-height: 1.18;
  font-weight: 600;
  margin: 0 0 .5em;
}
h1 { font-size: 2.1rem; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

a { color: var(--navy-2); }
a:hover { color: var(--navy); }

p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
small { font-size: .85rem; }

/* Accessible focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--navy-2);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
main { padding: 2.5rem 0 4rem; }

/* Header / nav */
.site-header {
  background: var(--navy);
  color: #f3efe6;
  border-bottom: 3px solid var(--navy-2);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 1rem;
}
.brand {
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.35rem;
  color: #fbf8f2; text-decoration: none; letter-spacing: -.01em;
}
.brand span { color: #c9b487; }
.nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.nav a { color: #e7e0d2; text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: #fff; text-decoration: underline; }
.nav form { margin: 0; }
.nav .who { color: #b9c0cc; font-weight: 500; }
/* Log out is a form button, so it does not inherit .nav a. Without this it keeps
   .btn-link's navy — near-invisible on the navy header. */
.nav .btn-link { color: #e7e0d2; font-weight: 600; font-size: .95rem; cursor: pointer; }
.nav .btn-link:hover { color: #fff; text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-block; cursor: pointer; border: 1px solid transparent;
  border-radius: var(--radius); padding: .6rem 1.1rem; font: inherit;
  font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); }
.btn-link { background: none; border: none; color: var(--navy-2); padding: 0; font-weight: 700; }
/* Row actions inside a table. Same colours as a page-level button so the
   language is one thing, smaller so a table of them does not read as a wall. */
.btn-sm { padding: .34rem .7rem; font-size: .85rem; }

/* Cards */
.card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 1rem; }
@media (min-width: 680px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}

/* Forms */
.form { max-width: 520px; }
.form .field { margin-bottom: 1.1rem; }
label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid #cdc4b2; border-radius: 8px;
  padding: .6rem .7rem;
}
textarea { resize: vertical; }
.help { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.errorlist { color: var(--red); list-style: none; padding: 0; margin: .3rem 0 0; font-size: .9rem; }
.form-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem; }

/* Project-access checkboxes on the invite form.
   The global `label { display: block }` and `input { width: 100% }` above are
   written for text inputs; applied to a checkbox list they stretch the box
   across the row and push the project name onto a line of its own, so the list
   reads as a column of headings rather than a set of choices. Django gives the
   widget's container the field's auto id, so scope the row layout to that.
   row-reverse puts the checkbox on the right while the input stays first in the
   DOM, where the label's `for` and the tab order both expect it. */
#id_project_ids > div + div { border-top: 1px solid var(--line); }
#id_project_ids label {
  display: flex; flex-direction: row-reverse; justify-content: space-between;
  align-items: center; gap: 1rem; cursor: pointer;
  margin: 0; padding: .6rem .1rem;
  font-weight: 500; color: var(--ink);
}
#id_project_ids label:hover { color: var(--navy); }
#id_project_ids input[type="checkbox"] {
  flex: none; width: 1.1rem; height: 1.1rem;
  margin: 0; padding: 0; accent-color: var(--navy);
}

/* Drop zone (reference library upload). The file input stays the single source
   of truth — a drop assigns to it — so native validation still applies. */
.dropzone {
  border: 1px dashed #cdc4b2; border-radius: 8px; background: #fff;
  padding: .8rem; transition: border-color .12s ease, background .12s ease;
}
.dropzone.is-over { border-color: var(--navy-2); background: var(--paper-2); }
.dropzone input[type="file"] { border: 0; padding: 0; background: transparent; }
.dropzone-hint { margin: .45rem 0 0; font-size: .85rem; }
.dropzone-name { margin: .45rem 0 0; font-size: .85rem; font-weight: 700; color: var(--navy); }

/* Auth split panel */
.auth-wrap { max-width: 460px; margin: 1rem auto; }
.auth-wrap .card { padding: 2rem; }

/* Messages */
.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.msg { padding: .7rem 1rem; border-radius: 8px; border: 1px solid; font-weight: 600; }
.msg.success { background: #e9f3ee; border-color: #bfe0cf; color: #1f5e44; }
.msg.error   { background: #f6e7e7; border-color: #e6c2c1; color: #8f2c2a; }
.msg.info, .msg.warning { background: #f4ecdd; border-color: #e4d3ad; color: #6b521c; }

/* RAG badges (report colours reused in the UI) */
.rag { display: inline-block; padding: .15rem .6rem; border-radius: 999px;
       font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.rag-green { background: #e3f0e9; color: var(--green); border: 1px solid #bfe0cf; }
.rag-amber { background: #f6ecda; color: var(--amber); border: 1px solid #e7d3a8; }
.rag-red   { background: #f6e3e2; color: var(--red);   border: 1px solid #e6c2c1; }
.rag-none  { background: #efe9dc; color: var(--muted); border: 1px solid var(--line); }

/* Review progress — an indeterminate bar, because we genuinely cannot say how
   far through a review is. A bar that claims a percentage it does not know is
   worse than one that only says "still working". Reviews take minutes, not
   seconds, so the page has to keep visibly moving or it reads as hung. */
.progress { height: 8px; border-radius: 999px; background: #e7dfd0;
            border: 1px solid var(--line); overflow: hidden; margin: .9rem 0 .5rem; }
.progress-bar { height: 100%; width: 34%; border-radius: 999px;
                background: linear-gradient(90deg, var(--navy-2), var(--amber));
                animation: progress-slide 2.1s ease-in-out infinite; }
@keyframes progress-slide {
  0%   { margin-left: -34%; }
  100% { margin-left: 100%; }
}
/* Respect a user who has asked for less motion: hold a steady bar instead. */
@media (prefers-reduced-motion: reduce) {
  .progress-bar { animation: none; width: 100%; opacity: .55; }
}
.progress-note { color: var(--muted); font-size: .92rem; margin: 0;
                 transition: opacity .35s ease; }
.progress-note.fading { opacity: 0; }

/* Status pills */
.pill { display: inline-block; padding: .12rem .55rem; border-radius: 6px;
        font-size: .78rem; font-weight: 700; background: #efe9dc; color: var(--muted);
        border: 1px solid var(--line); }

/* Tables */
/* A card holding a table scrolls the TABLE sideways on a narrow window rather
   than the whole page. The Team page's row actions became buttons rather than
   text links (2 Sep 2026), which is wider — without this the body scrolls
   horizontally and the header goes with it. */
.card:has(> table) { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--line); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Project list rows */
.project-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.project-meta { color: var(--muted); font-size: .9rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.site-footer .container { padding-top: 1.5rem; padding-bottom: 2.5rem; }

/* Hero (landing) */
.hero { padding: 3.5rem 0 1rem; }
.hero h1 { font-size: 2.7rem; max-width: 16ch; }
.hero p.lede { font-size: 1.2rem; color: var(--muted); max-width: 56ch; }
.hero .cta { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }

/* Marketing pages (About/FAQ/Pricing/Trust): one consistent font (Manrope) and
   uniform heading sizes, with H1 kept larger. Scoped so the app UI is unaffected. */
.marketing h2, .marketing h3, .marketing h4 {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: -.01em;
}
.marketing h2, .marketing h3, .marketing h4 { font-size: 1.45rem; font-weight: 700; }
.marketing h2 { margin-top: 2rem; }
.marketing .card h2, .marketing .card h3 { margin-top: 0; }
.diff-cards .card { display: flex; flex-direction: column; }
.diff-icon { width: 34px; height: 34px; color: var(--navy-2); margin-bottom: .5rem; flex: none; }

/* Homepage sections */
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 800;
  color: var(--navy-2); margin: 0 0 .5rem; }
/* Two-column hero: copy left, the RAG report screenshot right (fills the space,
   shows the product immediately). Stacks on mobile with full-width CTAs. */
.home-hero { display: grid; gap: 2rem; align-items: center; max-width: none; }
.home-hero .hero-copy { max-width: 46ch; }
.home-hero .hero-copy h1 { max-width: none; }
.home-hero .lede { max-width: none; }
.hero-shot { margin: 0; }
.hero-shot img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(22, 38, 63, .14); }
.hero-shot figcaption { color: var(--muted); font-size: .82rem; margin-top: .5rem; text-align: center; }
.hero-note { margin-top: 1rem; color: var(--muted); font-size: 1.02rem; }
@media (min-width: 820px) {
  .home-hero { grid-template-columns: 1.05fr .95fr; }
}
@media (max-width: 560px) {
  .home-hero .cta { flex-direction: column; align-items: stretch; }
  .home-hero .cta .btn { width: 100%; text-align: center; }
}
.nav-login { color: var(--muted); font-weight: 500; }        /* de-emphasised, still keyboard-focusable */
.band { margin: 2.5rem auto 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line); max-width: 62ch; }
.card.feature { border: 1px solid var(--navy-2); box-shadow: 0 1px 0 var(--line); }

/* Trust strip: 5 inline items + a right link; wraps to 2 rows on mobile, never squashes */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; justify-content: center;
  margin: 1.6rem 0 0; padding: .85rem 1.1rem; background: #f3efe4; border: 1px solid var(--line);
  border-radius: 12px; font-size: .9rem; color: var(--navy); font-weight: 700; text-align: center;
}
.trust-strip span { position: relative; padding-left: 1.15rem; }
.trust-strip span::before { content: "✓"; position: absolute; left: 0; color: var(--navy-2); font-weight: 800; }
.trust-strip-link { font-weight: 700; margin-left: auto; }

.pull-out { font-size: 1.35rem; font-weight: 700; color: var(--navy); line-height: 1.35;
  margin: 1.2rem 0 0; max-width: none; }

/* How it works */
.steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.step { position: relative; padding-left: 3rem; }
.step-n { position: absolute; left: 0; top: -.15rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 800; }
.step h3 { margin: .1rem 0 .3rem; }
.closing-line { font-weight: 700; color: var(--navy); margin-top: 1.4rem; }
.roadmap-note { color: var(--muted); font-size: .92rem; margin-top: .4rem; }

.about .hero h1 { max-width: 24ch; }
.about-quote { max-width: 64ch; }

/* Roadmap storyboard (About page): vertical timeline */
.roadmap-section { margin-top: 2.5rem; }
.roadmap { list-style: none; margin: 1.3rem 0 0; padding-left: 1.5rem; border-left: 2px solid var(--line); }
.roadmap-item { position: relative; padding-bottom: 1.4rem; }
.roadmap-item:last-child { padding-bottom: 0; }
.roadmap-item::before { content: ""; position: absolute; left: -1.9rem; top: .35rem; width: .7rem; height: .7rem;
  border-radius: 50%; background: #fff; border: 2px solid var(--navy-2); }
.roadmap-item.now::before { background: var(--navy-2); }
.rm-phase { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; color: var(--navy-2); }
.roadmap-item h3 { margin: .1rem 0 .3rem; }
.roadmap-item p { color: var(--muted); margin: 0; max-width: 62ch; }
.shot-row { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.img-slot { margin: 0; display: grid; place-items: center; text-align: center; padding: 1rem;
  border: 2px dashed #c3b9a3; border-radius: 10px; background: #faf7ef; color: var(--muted); }
.img-slot figcaption { font-size: .85rem; }
.img-slot small { color: #8a8272; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 2px 10px rgba(22, 38, 63, .10); }
.shot figcaption { font-size: .85rem; color: var(--muted); margin-top: .45rem; text-align: center; }
.shot-zoom { display: block; cursor: zoom-in; }
.shot-zoom:focus-visible { outline: 3px solid var(--navy-2); outline-offset: 3px; border-radius: 10px; }
/* Lightbox (progressive enhancement). [hidden] must win over display:flex. */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(16, 38, 63, .88);
  display: flex; align-items: center; justify-content: center; padding: 2rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5); }
.lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: transparent; border: 0;
  color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; }
.headshot { max-width: 240px; margin: 0; }
.headshot img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); }

/* What makes it different: card 1 full width, then 3 beneath */
.diff-lead { margin-top: 1rem; }
.diff-others { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 1.1rem; }

/* Proof */
.proof { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
.proof-body { max-width: 65ch; }
.pull-quote { border-left: 3px solid var(--navy-2); padding: .2rem 0 .2rem 1rem; margin: 1.2rem 0; }
.pull-quote p { font-size: 1.1rem; color: var(--navy); }
.pull-quote footer { color: var(--muted); font-weight: 700; margin-top: .4rem; }
.chips { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { font-size: .8rem; font-weight: 700; color: var(--navy); background: #efe9dc;
  border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; }

/* Security bullets */
.sec-bullets { margin: 1rem 0 1.25rem 1.1rem; max-width: 68ch; }
.sec-bullets li { margin: .5rem 0; }

/* Pricing teaser */
.tiers { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin: 1rem 0 1.25rem; }
.tier h3 { margin-top: 0; }

/* Objections */
.qa { margin: 1rem 0; max-width: 68ch; }
.qa h3 { margin: 0 0 .25rem; }

.cta-band { margin-top: 2.75rem; padding: 2rem; background: #f3efe4; border-radius: 12px; text-align: center; }
.cta-band .cta { justify-content: center; }
.lead-wrap { max-width: 620px; }

@media (min-width: 768px) {
  .diff-others, .tiers { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* Bigger, legible product shots: upload + review side by side (~500px each),
     the RAG report full-width beneath (the money shot). */
  .shot-row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .shot-row .shot:last-child { grid-column: 1 / -1; }
  .shot-row .shot:last-child img { max-width: 900px; margin: 0 auto; }
  .proof { grid-template-columns: 1fr auto; }
}

/* Legal long-form pages (Terms, Privacy): readable measure + calm spacing. */
.legal-doc { max-width: 50rem; margin: 0 auto; line-height: 1.55; }
.legal-doc h1 { margin-bottom: .2rem; }
.legal-doc .legal-stamp { color: var(--muted); font-size: .95rem; margin: 0 0 1.6rem; }
.legal-doc h2 { font-size: 1.2rem; margin-top: 1.7rem; }
.legal-doc p { margin: .55rem 0; }
.legal-doc ul { margin: .4rem 0 .9rem 1.25rem; }
.legal-doc li { margin: .25rem 0; }