/* DDMind homepage v3. Generated from prototype/v3; do not edit here. */
/* DDMind v3 | Security page
   Shared look, nav, sections, term sheet, closing and footer come from ../v3.css. This file adds only what is
   specific to this page. Every rule is scoped under .v3-root, every new class starts with v3-sc-.

   Page     a hero (the claim with its blue full stop and the four facts it rests on, as one ruled row; from 900px
            the lead is the claim's note in the margin), the five protections as a term sheet with the Trust Center
            as their source in the margin, the questions as a second term sheet, then the shared closing.
   Trace    below 900: the homepage's own stubs and dotted chains (from v3.css). From 900 page.js draws one line:
            level from the full stop into the note's node, down the gutter past the Trust Center, out to the mark. */

/* --------- Thread layer (the svg is built by page.js from 900px up) --------- */
.v3-root .v3-sc-thread{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;pointer-events:none}

/* --------- Hero --------- */
/* --v3-sc-h1s is the headline's size; the note's offset at 900 and up is worked out from it. */
.v3-root .v3-sc-hero{--v3-sc-h1s:clamp(28px,calc(var(--v3-w) / 8.3),60px);padding:calc(var(--v3-navh) + 24px) 0 72px}
/* Phones: "Swiss / confidentiality / for your most / critical documents." (a short first line, like the
   homepage's "Polished"). The breaks are line feeds generated around the two spans (no <br>, and no space that
   an importer could trim); the size is taken from the column so the longest line ("critical documents.",
   8.19em) always fits. From 600 the first two lines join: see below. */
.v3-root .v3-sc-h1{font-size:var(--v3-sc-h1s);line-height:1.06}
.v3-root .v3-sc-h1a::before,.v3-root .v3-sc-h1a::after,.v3-root .v3-sc-h1c::before{content:"\A";white-space:pre}

/* the four facts: a ruled row, like the header of a term sheet */
.v3-root .v3-sc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:28px;margin-top:40px}
.v3-root .v3-sc-fact{padding-top:14px;border-top:1px solid var(--v3-hair2)}
.v3-root .v3-sc-fact-v{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.02em;color:var(--v3-ink);white-space:nowrap}
.v3-root .v3-sc-fact-l{margin-top:4px;font-size:15px;line-height:22px;color:var(--v3-text);text-wrap:pretty}

/* --------- The two term sheets --------- */
.v3-root .v3-sc-list .v3-term-t{text-wrap:balance}
/* the Trust Center link: a full 44px target on phones, its dot still level with the text */
.v3-root .v3-sc-proof{margin-top:-4px}
.v3-root .v3-sc-proof .v3-link{padding:8px 0}
/* links inside an answer */
.v3-root .v3-sc-inl{font-weight:500;color:var(--v3-ink);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--v3-hair2);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s ease-out,text-decoration-color .2s ease-out}
.v3-root .v3-sc-inl:hover{color:var(--v3-blue);text-decoration-color:var(--v3-blue)}

@media (max-width:899.98px){
  .v3-root .v3-sc-proof::before{top:18.5px}
}

/* the narrowest phones: "ISO/IEC 27001:2022" must stay inside its half of the column */
@media (max-width:359.98px){
  .v3-root .v3-sc-facts{column-gap:12px}
  .v3-root .v3-sc-fact-l{font-size:14px;line-height:20px}
}

/* ========= Tablet and up (600) ========= */
@media (min-width:600px){
  /* "Swiss confidentiality / for your most / critical documents." (the first line is 8.93em); from 900 the
     size follows the main column instead of the whole width */
  .v3-root .v3-sc-hero{--v3-sc-h1s:calc(var(--v3-w) / 9.05);padding:calc(var(--v3-navh) + 24px) 0 var(--v3-sec)}
  .v3-root .v3-sc-h1{line-height:1.04}
  .v3-root .v3-sc-h1a::before{content:none}
  .v3-root .v3-sc-facts{column-gap:24px;row-gap:32px;margin-top:var(--v3-gap)}
  .v3-root .v3-sc-fact{padding-top:18px}
  .v3-root .v3-sc-fact-v{font-size:28px;line-height:34px}
  .v3-root .v3-sc-fact-l{margin-top:6px}
}
@media (min-width:720px) and (max-width:899.98px){
  .v3-root .v3-sc-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ========= Desktop (900): exhibit | gutter with the thread | margin ========= */
@media (min-width:900px){
  .v3-root .v3-sc-hero{--v3-sc-h1s:min(112px,calc(var(--v3-main) / 9.05));padding:calc(var(--v3-navh) + 20px) 0 var(--v3-sec)}
  /* headline and facts in the exhibit column; the lead becomes the headline's note in the margin */
  .v3-root .v3-sc-hero-in{display:grid;grid-template-columns:var(--v3-main) minmax(0,var(--v3-mw));column-gap:var(--v3-gut);align-items:start}
  .v3-root .v3-sc-h1{grid-column:1;grid-row:1}
  .v3-root .v3-sc-facts{grid-column:1;grid-row:2}
  /* The note's first line sits level with the full stop at the end of the third line (its centre is 2.877em
     below the top of the headline), so the leader from the stop runs straight across into the note's node. */
  .v3-root .v3-sc-note{grid-column:2;grid-row:1 / span 2;max-width:none;margin-top:calc(var(--v3-sc-h1s) * 2.877 - 14px);font-size:18px;line-height:28px;letter-spacing:-.008em}

  /* five points, not the homepage's four: the closing rule goes under the last one */
  .v3-root .v3-sc-list .v3-term:nth-child(4){border-bottom:0}
  .v3-root .v3-sc-list .v3-sc-last{border-bottom:1px solid var(--v3-hair2)}
  .v3-root .v3-sc-proof{grid-row:5;margin-top:27px}
  .v3-root .v3-sc-proof .v3-link{padding:0}
  /* The white questions run straight into the white closing: their last rule takes the place of the band's
     edge on the homepage (one section space above the mark) instead of leaving two section spaces of white.
     Below 900 the dotted chain into the mark needs the full space, so this stays here. */
  .v3-root .v3-sc-faq{padding-bottom:0}

  /* where page.js draws the line, a node appears as the line reaches it (as on the homepage) */
  .v3-root.v3-sc-threaded .v3-pin::before{opacity:0;transition:opacity .4s ease-out}
  .v3-root.v3-sc-threaded .v3-pin::after{transform:scaleX(0);transition:transform .5s var(--v3-out) .1s}
  .v3-root.v3-sc-threaded .v3-pin.v3-sc-lit::before{opacity:1}
  .v3-root.v3-sc-threaded .v3-pin.v3-sc-lit::after{transform:none}
}
@media (min-width:900px) and (max-width:1099.98px){
  .v3-root .v3-sc-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}
@media (min-width:1100px){
  .v3-root .v3-sc-facts{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
  .v3-root .v3-sc-fact-v{font-size:clamp(28px,2.2vw,32px);line-height:1.15}
  .v3-root .v3-sc-fact-l{font-size:16px;line-height:24px}
}
@media (min-width:1440px){
  .v3-root .v3-sc-note{margin-top:calc(var(--v3-sc-h1s) * 2.877 - 15px);font-size:20px;line-height:30px;letter-spacing:-.01em}
  .v3-root .v3-sc-note.v3-pin::before{top:11.5px}
  .v3-root .v3-sc-note.v3-pin::after{top:14.5px}
}

/* ========= Reduced motion: everything in its final state ========= */
@media (prefers-reduced-motion:reduce){
  .v3-root.v3-sc-threaded .v3-pin::before,.v3-root.v3-sc-threaded .v3-pin::after,.v3-root .v3-sc-inl{transition:none}
}