/* ===========================================================================
   The sub-pages, brought onto the landing page's language.

   About, Contact, Blog, Changelog, Docs, Privacy and Terms were built against
   the earlier design: a full-width bar with a rule under it, the old violet
   gradient button, cards on a tinted ground and a four-column link footer.
   This sheet gives all seven the chrome the landing page now has, without
   touching their content:

     - the header is the same floating glass pill, here over white;
     - the page's opening block takes the section type scale (small uppercase
       eyebrow, a 56-design-pixel title, a grey lede);
     - cards are white with a hairline, the way the plan cards are;
     - the primary button is ink, not the gradient;
     - the footer is the landing's closing card, from footer.css.

   Loaded after site.css, before any page's own <style>.
   =========================================================================== */

/* ---- the header ----------------------------------------------------------
   These pages do not style a header of their own any more. They carry the
   landing's row, the same four fixed pieces on the same Figma coordinates,
   and hero.css draws all of it. What was here before was a second bar built
   to look like that one, and it drifted: 1201 wide against 969, 64 tall
   against 56, a wordmark the landing does not show, larger links, and two
   framed buttons where the landing has a text link and one button.

   All this sheet still owes the row is the frame it is measured in. On the
   landing that comes from the hero canvas; here there is no canvas, so a
   fixed strip of no height stands in for it and hands down the same four
   variables. `container-type` is what makes 100cqw mean what it means over
   there, the viewport without its scrollbar, so the bar lands on the same
   pixel rather than a scrollbar's width off. Layout containment comes with
   it and makes the strip the containing block for the fixed children, which
   costs nothing: the strip sits in the viewport's top left corner, so their
   coordinates are the coordinates they already had. */

.fig-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    container-type: inline-size;
    z-index: 90;
    --fig-w: min(100cqw, calc(100svh * 1728 / 1117));
    --u: calc(var(--fig-w) / 1728);
    --fig-x: calc((100cqw - var(--fig-w)) / 2);
    --fig-y: 0px;
    font-family: 'Archivo', system-ui, sans-serif;
}

/* On the landing the plate fades in on the first scroll, because at the top
   the design has no bar, only the row over the hero. Here there is nothing
   for it to fade in over, so it is the header's ground from the first pixel. */
.fig-bar .fig-hero__bar {
    opacity: 1;
}

/* ---- the column ----------------------------------------------------------
   These pages sat on the site gutter, which is a hundred pixels left of the
   header bar, so under a pill that starts at 220 the first line of a page
   began at 120 and hung out past it. The landing does not do that: its
   headline starts at design 292, exactly under the mark, and the hero reads
   as one column with the bar above it.

   So the pages take that axis. The number and the frame are the bar's own,
   which is what keeps the two from ever disagreeing, and 292 from each side
   leaves the column centred. The footer is left out: it is the same closing
   card the landing carries, and it keeps the site gutter on both. */

body.has-fig-nav:not(.has-hero) {
    --pg-w: min(100vw, calc(100svh * 1728 / 1117));
    --pg-u: calc(var(--pg-w) / 1728);
    --pg-col: calc((100vw - var(--pg-w)) / 2 + 292 * var(--pg-u));
}

/* ---- the opening block --------------------------------------------------- */

.page-head {
    display: grid;
    gap: 16px;
    justify-items: start;
    padding: calc(64px + 96px) var(--pg-col) 64px;
    background: var(--paper);
}

/* the title's measure used to be the block's own 780; the block is the whole
   column now, so the measure belongs on the line itself */
.page-head h1 { max-width: 15ch; }
/* never narrower than its longest word, which cannot break: German titles
   such as "Nutzungsbedingungen" run past 15ch on their own */
.page-head h1 { min-width: min-content; }
.page-head .lede { max-width: 620px; }

/* The arrow the old eyebrow carried is dropped: the page's eyebrows are the
   same small uppercase line the landing's sections use. */
.page-head .eyebrow {
    margin: 0;
    font-size: clamp(9px, 0.694vw, 12px);
    line-height: 1.55;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #171717;
}

.page-head h1 {
    margin: 0;
    font-weight: 400;
    font-size: clamp(36px, 3.9vw, 56px);
    line-height: 1.07;
    letter-spacing: -0.015em;
    color: var(--c-text, #212121);
    text-wrap: balance;
}

.page-head .lede {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    line-height: 1.5;
    color: #656565;
}

/* The German copy of a page whose text exists in English only (privacy,
   terms) says so in its head, before the English text starts. */
.page-head__note {
    margin: 8px 0 0;
    padding: 7px 14px;
    border: 1px solid var(--line, #e5e5e5);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.4;
    color: #4a4a4a;
}

/* ---- sections and prose -------------------------------------------------- */

main { background: var(--paper); }

.section { padding: 0 var(--pg-col) 88px; }

.section > .prose + .grid,
.section > .prose + .about-cards { margin-top: 40px; }

.prose h2 {
    margin: 0 0 16px;
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--c-text, #212121);
}

/* site.css gives a section heading 64px of air above its rule, and the
   shorthand above took it away again: on /terms, /privacy and /docs the
   rule sat on the last line of the section before it. Every heading after
   the first keeps the air; the first one starts its block flush. */
.prose > * + h2 { margin-top: 64px; }

.prose h3 {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.prose p,
.prose li {
    font-size: 16px;
    line-height: 1.6;
    color: #656565;
}

.prose strong { color: var(--ink); font-weight: 500; }

/* Anchor links land under the floating bar unless every target keeps room
   for it. The bar's own bottom is 104 design px, plus a little air. main
   shipped a flat 90px for this; the frame gives the same thing at every
   width. */
[id] { scroll-margin-top: calc(104 * var(--pg-u) + 24px); }

/* ---- the docs guides ------------------------------------------------------
   A full-width stack, not the two-up grid the rest of the page uses: the
   install list does not read in half a column. */

.stack { display: grid; gap: 24px; }

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.steps {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: #656565;
}

.steps strong { color: var(--ink); font-weight: 500; }

/* ---- cards ---------------------------------------------------------------- */

.card {
    background: #fff;
    border: 0;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 0 0 1px var(--line-soft);
}

.card h3 {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--c-text, #212121);
}

.card p { font-size: 15px; line-height: 1.55; color: #656565; }

/* Every margin inside a card was zeroed, which is right for a card holding
   one sentence and wrong for one holding several: on the docs page the
   Contact Support button sat flush against the line above it. A card is a
   stack now, and the line carrying an action gets more air than a line
   carrying prose.

   The zeroing lives on the child rather than on `p` and `h3`, because a
   type selector beats the universal one and the stack rule never reached a
   paragraph while it did. */
.card > * { margin: 0; }
.card > * + * { margin-top: 14px; }
.card > h3 + * { margin-top: 10px; }
/* the prose rules reach into a card that sits inside .prose and gave its
   heading a 40px lead on top of the card's own padding */
.card > *:first-child { margin-top: 0; }

/* The action sits lower than a paragraph would. Two shapes reach it: the
   button wrapped in its own line, and the button dropped straight into the
   card, which is how the contact page writes it. */
.card > p:has(> .btn),
.card > .btn { margin-top: 24px; }

/* A button inside prose is a button, not a link. The prose link colour is
   more specific than .btn--outline and was tinting the label violet, the one
   saturated thing left on these pages. */
.prose a.btn--outline { color: var(--ink); }
.prose a.btn--primary { color: #fff; }

/* the ruled variant keeps its hairline, in the warm line colour */
.ruled {
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
}

.ruled h3 {
    margin: 0 0 10px;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ruled p { margin: 0; font-size: 15px; line-height: 1.55; color: #656565; }

/* ---- icons ---------------------------------------------------------------- */
/* Ink, like every glyph on the landing, and the same thinner stroke the plan
   cards took. The violet was left over from the earlier accent-led design. */

.icn { color: inherit; --icn-stroke: 1.2; }

.icn--chip {
    border-color: var(--line-soft);
    border-radius: 10px;
    color: var(--ink);
}

/* ---- buttons -------------------------------------------------------------- */
/* Ink, not the gradient: the landing's own buttons are all ink now and the
   violet was the only saturated thing left on these pages. */

.btn--primary {
    background-image: none;
    background-color: var(--ink);
    border-color: transparent;
    color: #fff;
}

.btn--primary:hover {
    background-image: none;
    background-color: #2E2E35;
    border-color: transparent;
    color: #fff;
    box-shadow: none;
}

.btn--outline {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.btn--outline:hover {
    background-image: none;
    background-color: #F4F2F8;
    border-color: var(--line);
    color: var(--ink);
}

/* ---- narrow screens ------------------------------------------------------- */

/* 900, where the row hands over to the phone bar, so the page's own spacing
   turns on the same breakpoint the header does. */
@media (max-width: 900px) {
    .page-head { padding: calc(56px + 72px) 24px 48px; }
    .page-head h1 { max-width: none; }
    .section { padding: 0 24px 64px; }
    .card { padding: 24px; border-radius: 20px; }
}