/* The terms page and the privacy page (terms.html, privacy.html) IN THE
   WEBSITE'S LOOK: its dark bar, a dark band for the title, the document on a
   white sheet. The website's own Terms and Privacy addresses open these two
   pages, so a visitor who follows one stays on what reads as one site.

   The words are not here and not in the pages: they are TandC.txt and
   Privacy.txt, which the pages draw. Nothing in this file changes a word. */
:root{
  --ink:#12343B;--deep:#0B2328;--text:#203235;--ink-2:#2B4A50;--muted:#647173;
  --green:#2F7B64;--mint:#9FE3CE;--mint-2:#B8EEDD;
  --soft:#EEF8F4;--band-line:#CFE6DD;--line:#D9E2DF;--page:#F4F7F6;--sheet:#FFFFFF;
  --serif:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
/* An element marked hidden stays hidden: a rule below that sets display, the
   save-and-print row's among them, would otherwise show it. */
[hidden]{display:none!important}
body{margin:0;font:400 16px/1.6 var(--sans);color:var(--text);background:var(--page);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
::selection{background:var(--mint);color:var(--ink)}

/* THE BAR: the website's, with only what a reader of a document needs. */
.lh{background:var(--ink);color:#F4F7F6;border-bottom:1px solid rgba(244,247,246,.1)}
.lh-in{max-width:1160px;margin:0 auto;min-height:68px;padding:10px clamp(18px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img{display:block;width:46px;height:40px}
.wm{display:flex;flex-direction:column;align-items:center}
.wm-1{font:600 19px/1 var(--serif);letter-spacing:.18em;margin-right:-.18em;color:#F4F7F6}
.wm-2{display:flex;align-items:center;gap:5px;margin-top:5px;font:700 8px/1 var(--sans);letter-spacing:.26em;color:var(--mint)}
.wm-2 i{display:block;width:10px;height:1px;background:var(--mint)}
.lh-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(14px,2.4vw,28px);font-size:14.5px}
.lh-links a{color:rgba(244,247,246,.86);text-decoration:none;font-weight:500}
.lh-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.lh-links a.tel{color:var(--mint);font-weight:700;white-space:nowrap}
.lh :focus-visible,.hero :focus-visible,.lf :focus-visible{outline-color:var(--mint)}

/* THE TITLE, on the website's dark band. */
.hero{background:radial-gradient(130% 140% at 72% -20%,#12343B 0%,#0B2328 100%);color:#F4F7F6}
.hero-in{max-width:1160px;margin:0 auto;padding:clamp(34px,5.4vw,66px) clamp(18px,4vw,40px) clamp(30px,4.6vw,54px)}
.eyebrow{margin:0 0 14px;font:700 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
h1{margin:0;max-width:20ch;font:600 clamp(34px,4.8vw,56px)/1.06 var(--serif);letter-spacing:-.01em;color:#F4F7F6;text-wrap:balance}
.hero-row{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px}
.meta{margin:0;font-size:15px;line-height:1.6;color:rgba(244,247,246,.74)}
.tools{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
.tools a,.tools button{font:600 14.5px/1 var(--sans);color:var(--ink);background:var(--mint);border:0;border-radius:999px;padding:11px 20px;cursor:pointer;text-decoration:none}
.tools a:hover,.tools button:hover{background:var(--mint-2)}

/* THE DOCUMENT, on a white sheet. */
.wrap{flex:1 1 auto;width:100%;max-width:900px;margin:0 auto;padding-block:clamp(18px,3.4vw,40px) clamp(30px,5vw,64px);padding-inline:clamp(12px,4vw,40px)}
.note{margin:0 0 16px;padding:14px 18px;border:1px solid var(--band-line);border-left:4px solid var(--green);border-radius:12px;background:var(--soft);font-size:15px;line-height:1.55;color:var(--ink)}
.note a{color:var(--green);font-weight:700}
.doc{background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,4.4vw,52px);box-shadow:0 30px 60px -44px rgba(18,52,59,.45)}
/* An empty sheet is not drawn. Before the text has arrived, and with
   scripting off, it would otherwise show as an empty white card under the
   link. The pages deliver the box with nothing in it, not even a space: one
   space or line break between its tags and this rule stops matching. */
.doc:empty{display:none}
.doc>:first-child{margin-top:0}
.doc h2{margin:40px 0 12px;font:600 clamp(23px,3.2vw,30px)/1.15 var(--serif);color:var(--ink);text-wrap:balance}
.doc h3{margin:30px 0 8px;font:600 clamp(19px,2.3vw,22px)/1.25 var(--serif);color:var(--ink)}
.doc p{margin:0 0 11px;font-size:16px;line-height:1.72;color:var(--text);overflow-wrap:anywhere}
.doc a{color:var(--green);font-weight:700}
/* who the supplier is: the four lines before the first heading */
.doc p.line{margin-bottom:3px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.doc p.cl{display:grid;grid-template-columns:3.3em minmax(0,1fr);gap:0 8px}
.doc p.cl .n{font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.doc p.sub{margin-left:3.3em;grid-template-columns:2.2em minmax(0,1fr)}
.doc p.sub .n{font-weight:500;color:var(--muted)}
/* the key terms in brief */
.sum{margin:26px 0 0;padding:6px clamp(16px,2.6vw,26px) 12px;border:1px solid var(--band-line);border-radius:16px;background:var(--soft);scroll-margin-top:18px}
.sum h2{margin-top:20px}
.sum h3{margin-top:20px;font:700 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.sum p{color:var(--ink)}
.doc>h2{padding-top:30px;border-top:1px solid var(--line)}
.doc>h2:first-child{padding-top:0;border-top:0}
.end{margin:32px 0 0!important;font:700 12px/1.3 var(--sans)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important}

/* THE ACCEPT BUTTON, on a terms link from an email */
.accept{margin-top:34px;padding:clamp(22px,3.4vw,34px);border:1px solid var(--band-line);border-radius:16px;background:var(--soft);text-align:center;scroll-margin-top:18px}
.accept strong{display:block;margin-bottom:8px;font:600 clamp(22px,2.8vw,28px)/1.2 var(--serif);color:var(--ink)}
.accept p{max-width:520px;margin:0 auto 18px;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.accept button{font:700 16px/1.2 var(--sans);color:var(--ink);background:var(--mint);border:0;border-radius:999px;padding:16px 34px;min-height:52px;cursor:pointer}
.accept button:hover{background:var(--mint-2)}

/* THE FOOT: the website's dark, and the one thing a reader may want next. */
.lf{background:var(--deep);color:rgba(244,247,246,.74);font-size:14px}
.lf-in{max-width:1160px;margin:0 auto;padding:20px clamp(18px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 26px}
.lf a{color:var(--mint);font-weight:700;text-decoration:none}
.lf span{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.lf .more a{color:rgba(244,247,246,.82);font-weight:500}
.lf .more a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:560px){
  .lh-links a.opt{display:none}
  .doc{border-radius:14px}
  .doc p.cl{grid-template-columns:2.9em minmax(0,1fr)}
  .doc p.sub{margin-left:1.4em}
}

/* ON PAPER, or saved as a PDF: the words only. */
@media print{
  .lh,.lf,.tools,.note,.accept,.eyebrow{display:none}
  body{display:block;background:#fff}
  .hero{background:none;color:#000}
  .hero-in{padding:0 0 12px;max-width:none}
  h1{color:#000;max-width:none}
  .meta{color:#333}
  .wrap{max-width:none;padding:0}
  .doc{border:0;border-radius:0;box-shadow:none;padding:0}
  .sum{background:none}
}