/* ===========================================================================
   supervertaler.com – the restrained house style.

   Matches beijer.uk, which is the identity anyone who knows the author
   already recognises. Black type on white, generous measure, one accent per
   product and no other colour anywhere.

   That last rule is the point rather than a preference: the site has to make
   blue mean "for Trados" and vermillion mean "for memoQ". On a page with no
   other colour those two marks carry information. On a page of gradients and
   coloured badges they are decoration competing with decoration.
   =========================================================================== */

:root {
    --ink:       #0a0a0a;
    --ink-soft:  #2b2b2b;
    --ink-faint: #6b6b6b;
    --rule:      #e3e3e3;
    --wash:      #fafafa;

    --trados: #2f6fdb;   /* the Sv mark's blue */
    --memoq:  #f05137;   /* memoQ's own vermillion, sampled from its icon */
    /* Text tints. The brand colours above are for marks and rules, where a
       filled shape is not held to a text contrast ratio. As words on white,
       #f05137 is only 3.5:1 and fails AA at body size; this is 5.1:1 and
       reads as the same colour. Trados blue passes as it is, at 4.6:1. */
    --memoq-text: #c93a25;

    --measure: 46rem;    /* comfortable reading width for body text */
    --page:    62rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: -apple-system, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    font-size: 18.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--ink); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* ---- header ------------------------------------------------------------ */
header { border-bottom: 1px solid var(--rule); }
header .wrap { display: flex; align-items: center; gap: 2rem;
               padding-top: 1.2rem; padding-bottom: 1.2rem; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
         text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
nav { margin-left: auto; display: flex; gap: 1.5rem; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--ink-soft); font-size: 1rem; }
nav a:hover { color: var(--ink); text-decoration: underline; }
nav a.here { color: var(--ink); font-weight: 600; }

/* The two product links carry a swatch in their product's colour rather than
   coloured text. Three reasons, in order of weight:

   Coloured link text reads as STATE first - visited, or current page - and
   this nav already says "you are here" with colour on text (nav a.here), so
   colouring two items the same way blunted the only signal that does that job.

   A swatch is not text. Text at this size needs 4.5:1, which the vermillion
   misses (3.5:1), so the words had to use a darkened tint and the nav red was
   then NOT the card red - a legend with the wrong key. A filled shape is held
   to 3:1, so these carry the true brand colours and match the cards exactly.

   And colour alone is no distinction in print or to a colour-blind reader;
   the dot and the gap group the two products whichever way it is read. */
nav a[href="/trados/"]::before,
nav a[href="/memoq/"]::before {
    content: ""; display: inline-block; width: .5rem; height: .5rem;
    border-radius: 50%; margin-right: .45rem; vertical-align: .06em;
}
nav a[href="/trados/"]::before { background: var(--trados); }
nav a[href="/memoq/"]::before  { background: var(--memoq);  }

/* The two products are a different kind of item from How it works / Pricing /
   Docs / Discussions, so the pair is set slightly apart from them. */
nav a[href="/memoq/"] { margin-right: .6rem; }

/* ---- hero -------------------------------------------------------------- */
.hero { padding: 4.5rem 0 3rem; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.5rem); line-height: 1.08;
     letter-spacing: -.025em; margin: 0 0 1.2rem; max-width: 22ch; font-weight: 700; }
h1 .host { color: var(--accent, var(--ink)); }
.standfirst { font-size: 1.2rem; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2rem; }

/* ---- the licence note, and any bordered aside -------------------------- */
/* The measure is set here as well as on .standfirst and .punch: without it
   this paragraph ran to the full page width while the two above it stopped
   at 46rem, and the hero had two different right edges. */
.licence { max-width: var(--measure); }
.note { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
        padding: 1.1rem 0; max-width: var(--measure); }

/* ---- buttons ----------------------------------------------------------- */
.go, .go-quiet {
    display: inline-block; text-decoration: none; font-weight: 600; font-size: 1rem;
    padding: .6rem 1.15rem; border-radius: 3px; border: 1px solid var(--ink);
}
.go { background: var(--ink); color: #fff; }
.go:hover { background: #000; }
.go-quiet { background: #fff; color: var(--ink); }
.go-quiet:hover { background: var(--wash); }
.when { display: block; margin-top: .8rem; font-size: .9rem; color: var(--ink-faint); }

/* ---- the two product cards on the landing page ------------------------- */
/* Only the block sides: this element also carries .wrap, whose left/right
   padding is what keeps the cards off the screen edge. The padding shorthand
   here reset it to zero and the cards ran edge to edge on a phone. */
.products { display: grid; gap: 3rem; padding-top: 3rem; padding-bottom: 3rem;
            grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.product { border-top: 2px solid var(--c); padding-top: 1.4rem; }
.product.trados { --c: var(--trados); }
.product.memoq  { --c: var(--memoq);  }
/* Set into the heading rather than stacked above it: the same lockup as
   the brand mark in the header, and one row of vertical furniture fewer
   between the card's coloured rule and its name. Inline rather than flex,
   so 'Supervertaler for memoQ' still wraps as ordinary text. */
.mark { width: 30px; height: 30px; vertical-align: -.32em; margin-right: .45rem; }
.product h2 { font-size: 1.4rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
.product h2 .host { color: var(--c); }
.product .where { color: var(--ink-faint); font-size: .97rem; margin: 0 0 1rem; }
.product ul { margin: 0 0 1.5rem; padding-left: 1.1rem; }
.product li { margin-bottom: .4rem; color: var(--ink-soft); }
.product li::marker { color: var(--c); }

/* ---- generic sections -------------------------------------------------- */
section.band { border-top: 1px solid var(--rule); padding: 3.25rem 0; }
section.band.wash { background: var(--wash); }
section.band h2 { font-size: 1.6rem; margin: 0 0 1rem; letter-spacing: -.015em; }
section.band > .wrap > p { max-width: var(--measure); color: var(--ink-soft); margin: 0 0 1.2rem; }

/* ---- feature list on a product page ------------------------------------ */
.features { display: grid; gap: 2.5rem 3rem; margin-top: 2rem;
            grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.feature h3 { font-size: 1.12rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
.feature p  { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .99rem; }
.feature ul { margin: 0; padding-left: 1.1rem; }
.feature li { color: var(--ink-soft); font-size: .96rem; margin-bottom: .3rem; }
.feature li::marker { color: var(--accent, var(--ink-faint)); }

/* ---- steps ------------------------------------------------------------- */
.steps { display: grid; gap: 2rem; margin-top: 1.5rem;
         grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); counter-reset: step; }
.step h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.step h3::before { counter-increment: step; content: counter(step) ". "; color: var(--accent, var(--ink-faint)); }
.step p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---- pricing ----------------------------------------------------------- */
.price { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .2rem; }
.price small { font-size: 1rem; font-weight: 400; color: var(--ink-faint); }
.price-note { color: var(--ink-faint); font-size: .95rem; margin: 0 0 1.4rem; }

/* ---- media ------------------------------------------------------------- */
.shot { border: 1px solid var(--rule); border-radius: 4px; display: block; }
.shot-grid { display: grid; gap: 1.75rem; margin-top: 1.5rem;
             grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.shot-grid figure { margin: 0; }
.shot-grid figcaption { font-size: .93rem; color: var(--ink-faint); margin-top: .5rem; }
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
         border: 1px solid var(--rule); border-radius: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- footer ------------------------------------------------------------ */
footer { border-top: 1px solid var(--rule); padding: 2rem 0 3rem;
         color: var(--ink-faint); font-size: .93rem; }
footer a { color: var(--ink-soft); }

/* ---- banner used only on unpublished drafts ---------------------------- */
.draft-banner { background: #fef3c7; border-bottom: 1px solid #f2c14e; padding: .55rem 0;
                font-size: .85rem; color: #7a5b12; text-align: center; }

@media (max-width: 760px) {
    body { font-size: 17.5px; }
    .wrap { padding: 0 1.15rem; }
    .hero { padding: 2.5rem 0 1.5rem; }

    /* The header stacks: brand on its own line, then the links wrapping under
       it. A row of eight links squeezed beside the wordmark is unreadable on a
       phone, and a hamburger would be a script and a state for five links. */
    header .wrap { flex-wrap: wrap; gap: .85rem; }
    .nav-toggle { display: block; }

    /* Hidden until opened. display:none rather than height/opacity, so the
       links are out of the tab order while the menu is shut. */
    nav { display: none; margin-left: 0; width: 100%;
          flex-direction: column; gap: 0; padding-bottom: .4rem; }
    nav.open { display: flex; }
    nav a { font-size: 1rem; padding: .55rem 0; border-top: 1px solid var(--rule); }

    h1 { max-width: none; }
    .standfirst { font-size: 1.1rem; }

    .products { gap: 2.5rem; padding-top: 2.25rem; padding-bottom: 2.25rem; }
    section.band { padding: 2.5rem 0; }
    .features { gap: 2rem; }

    /* Full-width tap targets: a 44px-high button is the accessibility floor,
       and side-by-side buttons on a phone are two half-width targets. */
    .go, .go-quiet { display: block; text-align: center; margin-bottom: .6rem; }

    .foot-grid { gap: 1.75rem; }
}

/* ---- footer, with the navigation the old dark footer carried ------------ */
.foot-grid { display: grid; gap: 2rem 2.5rem; padding-bottom: 2rem;
             grid-template-columns: minmax(min(16rem, 100%), 1.4fr) repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.foot-brand .brand { margin-bottom: .6rem; }
.foot-brand p { margin: 0 0 .4rem; color: var(--ink-faint); font-size: .93rem; max-width: 26rem; }
.foot-col h3 { font-size: .95rem; margin: 0 0 .6rem; color: var(--ink); letter-spacing: -.005em; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: .38rem; }
.foot-col a { color: var(--ink-faint); text-decoration: none; font-size: .93rem; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-bottom { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.foot-bottom p { margin: 0 0 .35rem; }

/* NOTE: the pages link this as /mono.css?v=N. Cloudflare caches CSS for four
   hours, so without the query a style change reaches visitors long after the
   markup that depends on it. Bump N in all three pages when this file changes. */

/* ---- back to top ------------------------------------------------------- */
.to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem;
    width: 44px; height: 44px;              /* the accessible minimum tap target */
    display: grid; place-items: center;
    background: #fff; color: var(--ink);
    border: 1px solid var(--rule); border-radius: 50%;
    text-decoration: none; font-size: 1.15rem; line-height: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,.09);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--ink); }
.to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---- mobile menu ------------------------------------------------------- */
.nav-toggle {
    display: none;                 /* desktop: the links speak for themselves */
    margin-left: auto;
    width: 44px; height: 44px;     /* the accessible minimum tap target */
    background: none; border: 1px solid var(--rule); border-radius: 4px;
    cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink);
                   margin: 4px auto; transition: transform .18s ease, opacity .18s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* Must come after the .nav-toggle base rule above: equal specificity, so
   source order decides. Appending the base rule below the earlier media block
   is exactly how the toggle ended up invisible on a phone. */
@media (max-width: 760px) {
    .nav-toggle { display: block; }
}

/* ---- the hero screenshot ----------------------------------------------- */
.hero-shot { margin: 2.5rem 0 0; }
.hero-shot img { display: block; width: 100%; border: 1px solid var(--rule); border-radius: 4px; }
.hero-shot figcaption { font-size: .9rem; color: var(--ink-faint); margin-top: .55rem; }

/* The line the standfirst lands on. Bigger than body text and set in the ink
   colour, so it reads as a conclusion rather than another paragraph. Not
   bold: the licence note directly below it is, and two bold blocks in a row
   read as a pair of subheadings rather than as a sentence - on a phone
   especially, where both wrap to three lines. */
.punch { font-size: 1.2rem; color: var(--ink); max-width: var(--measure);
         margin: 0 0 2rem; }