/*************************************************************************
 *  Copyright (C) 2026 SecureFlag Limited
 *  All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains the property
 * of SecureFlag Limited. The intellectual and technical concepts contained
 * herein are proprietary to SecureFlag Limited and may be covered by EU
 * and Foreign Patents, patents in process, and are protected by trade secret
 * or copyright law. Dissemination of this information or reproduction of this
 * material is strictly forbidden unless prior written permission is obtained
 * from SecureFlag Limited.
 */

/* =============================================================================
   The legal documents under /terms/. Loaded after public-pages.css, whose tokens
   it reuses.

   READ THIS BEFORE EDITING.

   These are contracts. The markup below `.termsContainer` is NOT edited -- not a
   word, not an element, not an attribute. Everything here is presentation applied
   from the outside.

   What the documents are: each is a hand-made SecureFlag page with a converted
   document body pasted in. Seven came out of Word (dpa, privacy, sla, subscription,
   subscription-0724, -0922, -personal-smb), two out of Apple Pages
   (subscription-0126, subscription-threatcanvas-privatecloud) and one is
   hand-written (eula).

   The Word seven carry between 129 and 1297 inline `style` attributes each --
   subscription-personal-smb.html is 57% inline style text by weight -- hard-coding
   font-family:"Arial", font-size:11.0pt and margin-left in centimetres on
   individual paragraphs and spans. An inline style beats any stylesheet rule, so
   the only lever on body typography is `!important`, used below on exactly two
   properties and no more.

   Two things are deliberately NOT overridden:
     * margin-left / text-indent -- they carry the clause indentation, which is
       part of how the contract reads. Flattening it would change the document's
       structure even though the words stayed the same.
     * font-weight -- in the Word files emphasis is often carried as
       `style="font-weight:bold"` rather than <b>, and in a contract emphasis is
       arguably substantive.

   Scoped to `.termsContainer`, never `.WordSection1`: the latter is missing from
   subscription-0724.html (which has a broken `<div class=>` at line 40) and from
   subscription-0126.html. `.termsContainer` is present on all ten.
   ============================================================================= */

/* ------------------------------------------------------------------- frame */

/* The chrome keeps its original class names. Dropping auth.min.css leaves them
   unstyled, and restyling them here rather than renaming them in the markup keeps
   the change to each document down to the two edits in its <head> plus the logo's
   whitelabel hook -- nothing else in these files is touched. */
.auth-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.auth-bg {
    background: var(--sfb-ground);
    background-image: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(42, 148, 255, 0.16), transparent 70%);
}
.auth-header {
    padding: 28px 32px 34px;
}
.auth-header .logo {
    height: 30px;
    width: auto;
    display: block;
}
/* The whitelabel sheet swaps the image through `content: url(...) !important` but
   also sets `position: absolute; top: 16px; left: 24px` for the user portal's
   header. wtl.css loads last, so undo just the positioning at higher specificity
   and leave the tenant its image and height -- the same fix public-pages.css
   applies to .sfb-brand. */
.auth-header .logo.logo-img {
    position: static;
    top: auto;
    left: auto;
}
.auth-form-container { flex: 1 1 auto; }

@media (max-width: 760px) {
    .auth-header { padding: 20px 18px 24px; }
}


/* The document sits on the same card as the rest of the public pages, but wider
   and taller -- it is a document, not a notice. */
.termsContainer {
    width: auto;
    max-width: 900px;
    margin: 0 auto 64px;
    padding: 52px 60px 60px;
    border: 1px solid var(--sfb-line);
    border-radius: 24px;
    background: var(--sfb-surface);
    box-shadow: 0 24px 60px -28px rgba(16, 32, 64, 0.28),
                0 2px 6px rgba(16, 32, 64, 0.04);
}

/* --------------------------------------------------------------- body copy */

/* The two properties worth fighting the inline attributes for. Arial at 11pt is
   what Word pasted in; Inter at a real reading size is the whole point of the
   change. Everything else about the paragraph -- its indentation, its spacing,
   its emphasis -- is left exactly as the document has it. */
.termsContainer p,
.termsContainer span,
.termsContainer li,
.termsContainer td,
.termsContainer th,
.termsContainer div {
    font-family: var(--sfb-sans) !important;
    font-size: 15px !important;
}

.termsContainer {
    color: var(--sfb-ink-mid);
    line-height: 1.65;
}

/* Word emits empty <o:p> filler and stray spans; give paragraphs a consistent
   rhythm without touching their left indentation. */
.termsContainer p {
    margin-top: 0;
    margin-bottom: 13px;
}

/* eula.html and privacy.html are the only documents with real headings. */
.termsContainer h1,
.termsContainer h2,
.termsContainer h3,
.termsContainer h4 {
    font-family: var(--sfb-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--sfb-ink);
    margin: 34px 0 12px;
}
.termsContainer h1 { font-size: 30px; }
.termsContainer h2 { font-size: 21px; }
.termsContainer h3 { font-size: 17px; }
.termsContainer h4 { font-size: 15px; }
.termsContainer > h1:first-child,
.termsContainer > h2:first-child { margin-top: 0; }

.termsContainer a {
    color: var(--sfb-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.termsContainer a:hover { color: #245bb5; }

.termsContainer strong,
.termsContainer b { color: var(--sfb-ink); }

/* Word tables arrive with their own borders and cell padding; normalise only the
   frame so they sit on the card, and let the content keep its own alignment. */
.termsContainer table {
    max-width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}
.termsContainer td,
.termsContainer th {
    border: 1px solid var(--sfb-line-strong);
    padding: 9px 12px;
    vertical-align: top;
}
.termsContainer th { background: var(--sfb-surface-sub); }

/* A pasted table can be wider than the card; let it scroll rather than push the
   page sideways. */
.termsContainer { overflow-x: auto; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 760px) {
    .termsContainer {
        max-width: none;
        margin: 0 16px 40px;
        padding: 30px 22px 36px;
        border-radius: 16px;
    }
    .termsContainer p,
    .termsContainer span,
    .termsContainer li,
    .termsContainer td,
    .termsContainer th,
    .termsContainer div {
        font-size: 14.5px !important;
    }
}

/* Printing a contract is a normal thing to do with one. */
@media print {
    .sfb-top { display: none; }
    .termsContainer {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }
}