/* ============================================================================
   CircuitLeap — the four plain content pages.

   WHICH PAGES LOAD THIS FILE
   contact.html, register.html, terms.html and privacy.html. Nothing else does.

   HOW THE STYLESHEETS ARE LAYERED
   site.css  the shared design system. Colours, fonts, the header, the footer,
             the dividers, the buttons. Every page on the site loads it.
   home.css  the home page alone: its 3D hero and its product cards.
   page.css  this file. The furniture a page needs when it is just words on the
             page — no hero, no cards. It ADDS to site.css and never restates
             anything site.css already decides.

   IF A RULE HERE IS EVER NEEDED BY A FIFTH PAGE, MOVE IT INTO site.css. Do not
   copy it. One rule must have exactly one home, or a change has to be made in
   several places to be correct, and one of them will be missed.

   COLOURS ARE NOT WRITTEN AS HEX HERE. Every colour below is one of the named
   values site.css publishes (--cl-text, --cl-text-lead, --cl-text-muted,
   --cl-text-faint, --cl-accent, --hair), so changing the palette in site.css
   changes these pages too, for free. There is exactly one hex value in this
   file: the white behind the embedded Google Form. That is Google's own page
   colour, not one of ours, and it is explained where it appears.

   The visual language these pages follow is written up in full at
   brain/user/design/2026-08-25-linear-visual-style-spec.md. The three rules it
   turns on: nothing is layered behind the flat near-black ground; importance is
   shown by how light a grey the text is, never by a box or a colour; and
   nothing casts a shadow, blurs, or lifts when the pointer crosses it.
   ============================================================================ */


/* ==================================================== the top of every page --
   `.page-top` goes on the FIRST section of a page. `.page-lead` is the sentence
   under a page's headline. The small print below that is site.css's `.note`,
   reused as-is. */

/* WHY THIS EXTRA PADDING EXISTS
   The site header is `position: fixed` — it floats over the page instead of
   pushing it down, so the first 72px (--header-h) of every page is underneath
   it. The home page hides that behind a full-height hero. A page that opens
   straight into a headline has nothing to hide it with, so it has to step down
   past the header itself.

   The step has to be stated for each width because site.css shrinks a section's
   own padding as the screen narrows (112px, then 88px, then 72px) while the
   header stays 72px tall. At the narrowest step the two are equal, which would
   leave the headline sitting exactly on the header's bottom edge. */
.page-top{padding-top:calc(var(--header-h) + 96px)}
@media (max-width:1080px){.page-top{padding-top:calc(var(--header-h) + 72px)}}
@media (max-width:760px){.page-top{padding-top:calc(var(--header-h) + 48px)}}

/* The sentence under the headline, in the site's rank-2 grey — one step down
   from the headline, one step up from body copy.

   This is the single-column twin of site.css's `.head-lead`. It is separate
   because `.head-lead` belongs to the two-column `.head` layout, where the grid
   decides the width and the gap; here the sentence sits directly under the
   headline and has to set both itself. If a third page ever needs this, the two
   should be merged into ONE component in site.css rather than copied again.

   `ch` is the width of one character, so 44ch is roughly a 44-character line:
   short enough to read in a glance without the eye tracking back across the
   whole page. */
.page-lead{margin:22px 0 0;max-width:44ch;color:var(--cl-text-lead);
  font-size:clamp(17px,1.6vw,20px);line-height:1.45;letter-spacing:-.012em}

/* site.css's `.note` already is the small print: faintest grey, 13px. Only the
   width it wraps at is added here, so the sentence breaks near the headline
   above it rather than running the full width of the section. */
.note{max-width:56ch}


/* ================================================================== links --
   site.css sets `a{color:inherit;text-decoration:none}` so that the header,
   the footer and the buttons can each style their own links. That leaves a link
   sitting inside a sentence with no styling at all — the same colour as the
   words around it, and impossible to spot.

   These pages carry links inside sentences (the privacy notice, and the email,
   telephone and Google links in the legal text), so they give those links a
   treatment: the accent colour, plus a dimmed underline that lights up on
   hover. The underline is offset 3px below the baseline so it does not cut
   through the descenders of letters like g and y. */
.note a,
.legal-body a{color:var(--cl-accent);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--cl-accent) 38%,transparent);
  transition:color .15s ease,text-decoration-color .15s ease}
.note a:hover,
.legal-body a:hover{color:var(--cl-accent-strong);
  text-decoration-color:currentColor}


/* ================================================= the embedded enquiry form --
   Both the contact page and the "try our platform" page collect their answers
   through a Google Form, loaded inside an <iframe>. An <iframe> shows another
   website's page inside ours.

   TWO CONSEQUENCES, AND BOTH SHAPE THE RULES BELOW.

   1. We cannot restyle it. The form is served by Google, on Google's own web
      address, and a browser refuses to let one site reach into another site's
      page. So the form arrives with Google's own white background. All this
      page can do is frame it: a hairline border and the 6px corner radius the
      rest of the site uses.

   2. We cannot measure it. The same rule stops us asking the form how tall it
      is, so the height has to be written down by hand. Each page sets its own
      through the --form-h and --form-h-narrow values below, because the two
      forms ask different numbers of questions.

      Too short and the form grows its own scrollbar inside the frame, which
      reads as a bug. Too tall and it leaves a band of Google's own background
      colour under the last question. The values in each page were read off the
      rendered form.

   ONE MORE THING TO KNOW, because it looks like a bug and is not. Both forms
   are set to require a Google sign-in, so a visitor who is not signed in sees
   Google's "Sign in to continue" dialog over a dimmed copy of the form. The
   grey wash is Google's, drawn inside its own page; no rule in this file, and
   nothing our side can change. Whether the forms should ask for a sign-in at
   all is a decision for whoever owns them. */

/* A form is filled in one column, so it is held to a narrower measure than the
   section around it. It stays hard left like everything else on the page — the
   style being followed centres nothing except a closing call to action. The
   margin is the gap between the small print above and the form itself. */
.form-shell{max-width:720px;margin-top:56px}

.form-frame{width:100%;height:var(--form-h,1100px);
  border:1px solid var(--hair);border-radius:6px;overflow:hidden;
  /* White, matching what Google serves, so the frame does not flash dark and
     then light while the form is still loading. */
  background:#fff}
.form-frame iframe{display:block;width:100%;height:100%;border:0}

/* A phone shows the same questions stacked into a narrower column, so the same
   form needs more vertical room. */
@media (max-width:760px){
  .form-frame{height:var(--form-h-narrow,var(--form-h,1100px))}
}

/* The line under the form, pointing at the other page of the pair. site.css
   already styles `.arrow-link`; only the spacing above it needs saying. */
.form-after{margin:40px 0 0}


/* =========================================================== legal documents --
   The terms of service and the privacy policy. These are read line by line
   rather than skimmed, so everything below is spent on legibility: one narrow
   column, a clear ladder of headings, and a visible seam between clauses.

   The wording, the headings and the clause numbers are the company's legal text
   and are reproduced exactly. Nothing here changes them — every rule below sets
   size, colour or spacing only. */

/* ABOUT 70 CHARACTERS PER LINE, which is the width long prose is easiest to
   read at. `ch` is the width of the digit zero in the current font, and a zero
   is wider than the average letter, so 70ch of box gives roughly 70 characters
   of ordinary text. Measured rather than estimated: at this width the browser
   puts 68 characters on an average line of the terms of service, in a column
   637 pixels wide.

   The column is centred in the page while the text inside it stays left
   aligned. Everywhere else on this site a block is pinned hard left, but a
   document is a single narrow column with nothing beside it, and pinning it
   left would leave two thirds of a desktop screen empty on one side. */
.legal-body{max-width:70ch;margin-inline:auto}

/* The document title. Weight 510 is barely heavier than body text: these
   headlines get their presence from size and from lines packed tightly
   together, never from being bold. */
.legal-body h1{margin:0 0 40px;color:var(--cl-text);
  font:510 clamp(28px,3.4vw,40px)/1.06 var(--font-display);letter-spacing:-.022em}

/* A numbered top-level clause — "1. Services", "8. Representations and
   Warranties". Each one opens with a hairline drawn across the column. Over
   several thousand words the reader needs a visible seam between clauses, and a
   line does that without adding a box, a fill or a colour to the page. */
.legal-body h2{margin:68px 0 24px;padding-top:32px;
  border-top:1px solid var(--hair);color:var(--cl-text);
  font:510 24px/1.33 var(--font-display);letter-spacing:-.012em}

/* A sub-clause — "1.1 Services". */
.legal-body h3{margin:40px 0 12px;color:var(--cl-text);
  font:590 19px/1.35 var(--font-display);letter-spacing:-.014em}

/* A sub-sub-clause — "1.1.1 Simulators". One size below h3 and set in the
   display face, which is what separates it from the body text underneath at
   the same size. */
.legal-body h4{margin:28px 0 10px;color:var(--cl-text);
  font:590 15px/1.5 var(--font-display);letter-spacing:-.008em}

/* Body copy keeps the 15px and the 1.6 line height the whole site uses; only
   the colour and the gap between paragraphs are set here. The gap is what makes
   a wall of clauses readable. */
.legal-body p{margin:0 0 18px;color:var(--cl-text-muted)}

.legal-body ul{margin:0 0 18px;padding-left:22px;color:var(--cl-text-muted)}
.legal-body li{margin:0 0 10px}
/* The bullet itself is a position marker, not information, so it takes the
   faintest grey and lets the words carry the emphasis. */
.legal-body li::marker{color:var(--cl-text-faint)}

/* The legal text emphasises defined terms — "CircuitLeap", "we", "your" — with
   <strong>. Lifting them to the brightest grey marks them without the jump in
   weight a browser's default bold would give. */
.legal-body strong{color:var(--cl-text);font-weight:590}

/* A browser sets <address> in italic by default. There is no italic anywhere in
   this design, so it is turned off. */
.legal-body address{font-style:normal;color:var(--cl-text-muted)}

/* A very long unbroken string — an email address or a web address inside a
   sentence — would otherwise push the column wider than its measure on a phone
   and make the whole page scroll sideways. */
.legal-body a{overflow-wrap:anywhere}

/* Both documents open with the title and a short preamble before clause 1, so
   every h2 keeps its seam. This only guards against the document's very first
   element carrying a top margin that would push it away from the header. */
.legal-body>:first-child{margin-top:0}