/* Tektura: styles for the terms and the privacy notice only, split out of site.css so no other page has to
   download them. Loaded after site.css. The rules are in the order they had there, and
   none of them needs to win against a later rule of the same weight in site.css, so the
   split changes nothing on screen. A rule another page needs goes in site.css. */

.section.pale .step .n{background:var(--ink)}
.section.tight{padding-block:clamp(16px,3vw,40px)}
.table-wrap{overflow-x:auto}
/* Terms: the contents stay beside the clauses on a wide screen. */
.terms-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,3vw,32px);align-items:start}
/* On a window shorter than the list, the list scrolls inside itself, so every link can be
   reached (and a link tabbed to scrolls into view). */
.terms-toc{position:sticky;top:104px;margin-top:0;max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--on-ink-dim) transparent}
.glance.terms-toc dd{font-size:14px;line-height:1.35}
/* All 18 sections fit on a laptop screen: tighter rows than the other glance boxes. */
.glance.terms-toc .row{padding-top:4px;padding-bottom:4px}
@media (max-width:900px){.terms-layout{grid-template-columns:1fr}.terms-toc{display:none}}
/* Phones: the same contents, folded under the short version. */
.toc-m{display:none}
@media (max-width:900px){
  .toc-m{display:block;margin-top:14px;background:var(--white);box-shadow:0 0 0 1px var(--rule);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
  .toc-m summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:600;font-size:16px;color:var(--ink)}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary::after{content:"";flex:none;margin-left:auto;width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--ink);border-top-right-radius:7px;border-bottom-left-radius:7px;
    background:linear-gradient(var(--ink),var(--ink)) center/10px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 10px no-repeat}
  .toc-m[open] summary::after{background-size:10px 2px,2px 0;background-color:var(--ink);background-image:linear-gradient(var(--paper),var(--paper)),linear-gradient(var(--paper),var(--paper))}
  .toc-m summary:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}
  .toc-m ol{list-style:none;margin:0;padding:0 20px 10px}
  .toc-m li{border-top:1px solid var(--rule)}
  .toc-m a{display:grid;grid-template-columns:32px 1fr;align-items:baseline;padding:11px 0;color:var(--ink);text-decoration:none;border:0;font-size:16px;line-height:1.4}
  .toc-m a i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--slate)}
  .toc-m a:hover{color:var(--signal)}
}
@media (max-width:900px) and (forced-colors:active){
  .toc-m summary::after{content:"+";display:grid;place-items:center;border:1px solid CanvasText;font:500 17px/1 var(--mono)}
  .toc-m[open] summary::after{content:"\2212"}
}
@media (min-width:900px){
/* a heading that is an h3 for its place in the page but set as a subheading keeps that size */
:where(body:not(.staff,.client)) .as-h4{font-size:17px}
}

/* The page intro: the heading tab and opening paragraph take two of three columns, and a
   short ink panel takes the third — the page at a glance, or its contents. The panel’s
   top meets the tab and its edges meet the grid below. On a phone it follows the intro. */
.intro-row>div>.lede{margin:0}
.glance{margin-top:28px;background:var(--ink);color:var(--paper);padding:26px 28px;border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.glance .label{display:block;margin-bottom:6px;color:var(--on-ink-dim)}
.glance dl{margin:0}
.glance .row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:11px 0;border-top:1px solid rgba(255,255,255,.12)}
.glance .row:first-child{border-top:0;padding-top:4px}
.glance .row:last-child{padding-bottom:0}
.glance dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-ink-dim)}
.glance dd{margin:0;text-align:right;font-weight:500;font-size:16px;line-height:1.4}
.glance a{color:var(--paper);border:0}
.glance a:hover{color:var(--signal-dark)}
@media (min-width:861px){
  .intro-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,32px);align-items:start}
  .intro-row>div{grid-column:span 2}
  :where(body:not(.staff,.client)) .intro-row .lede{max-width:none;font-size:clamp(22px,2.1vw,29px);line-height:1.45}
  .glance{margin-top:0}
}
.m-sq .step{opacity:0;transform:translateX(-10px);transition:opacity .45s ease var(--d,0ms),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.m-sq .step .n{transform:scale(.6);transition:transform .35s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + .15s)}
.m-sq.on .step{opacity:1;transform:none}
.m-sq.on .step .n{transform:none}
.m-lite .m-sq .step{transition-duration:.3s,.35s}

/* ---------- Pencil drawings ----------
   The look of the mark’s construction drawing, used wherever the page talks about design:
   faint guide lines and circles that stay, a pencil outline drawn on, then the fill. The
   motion script adds .pd before drawing (so with less motion, or no script, they are simply
   there) and .on as each one arrives. */
.pencil{display:block;width:100%;height:auto;overflow:visible}
.pencil .pg,.pencil .pg *{fill:none;stroke:#BDB9B0;stroke-width:.6;stroke-dasharray:2 3}
.pencil .pl{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pencil .pl.sigl{stroke:var(--signal);stroke-width:2.2}
.pencil .ink{fill:var(--ink)}.pencil .sig{fill:var(--signal)}.pencil .soft{fill:#D9D6CF}
.pencil.pd .pl{stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.45,0,.35,1) var(--d,0ms)}
.pencil.pd .pf,.pencil.pd .aa,.pencil.pd .stitch{opacity:0;transition:opacity .6s ease calc(var(--d,0ms) + .9s)}
.pencil.pd .pg{opacity:0;transition:opacity .7s ease var(--d,0ms)}
.pencil.pd.on .pl{stroke-dashoffset:0}
.pencil.pd.on .pf,.pencil.pd.on .aa,.pencil.pd.on .stitch,.pencil.pd.on .pg{opacity:1}

/* ---------- Terms and privacy: the short version first, then the full wording ---------- */
.lg-short{padding-top:clamp(28px,4vw,48px)}
.lg-short>.wrap>.label{display:block;margin:0 0 14px;color:var(--slate)}
.lg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.lg-card{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto 1fr auto;column-gap:14px;row-gap:4px;padding:20px 20px 18px;background:var(--white);color:var(--ink);text-decoration:none;box-shadow:0 0 0 1px var(--rule);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);transition:box-shadow .2s,transform .2s}
.lg-card:hover{box-shadow:0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.lg-card:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}
.lg-card .lg-ic{grid-row:1 / span 3;width:52px;height:52px}
.lg-card-t{font-weight:600;font-size:16px}
.lg-card-p{font-size:14.5px;line-height:1.5;color:var(--body);text-align:left!important}
.lg-go{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.pencil.lg-ic .pl{stroke-width:1.6}
.pencil.lg-ic .pg,.pencil.lg-ic .pg *{stroke-width:.7}
.terms .in-short{margin:10px 0 14px;padding:12px 14px;background:var(--paper);border-left:3px solid var(--signal);font-size:15.5px;line-height:1.5;color:var(--ink);text-align:left!important}
.terms .in-short .label{display:block;margin-bottom:4px;color:var(--slate)}
/* Each clause carries its number and an id (#c12-2) in the markup, so it can be copied,
   found and linked to. legal-page.js reads the same numbers for the emailed copy. */
.terms ol.tcl{list-style:none;margin:0;padding:0}
.terms ol.tcl>li{position:relative;padding-left:44px;margin:0 0 12px}
.terms ol.tcl ol{list-style:none;margin:8px 0 0;padding:0}
.terms ol.tcl ol>li{position:relative;padding-left:52px;margin:0 0 8px}
.terms ol.tcl .cn{position:absolute;left:0;top:.15em;font-family:var(--mono);font-size:12px;color:var(--slate)}
.terms ol.tcl li:target>.cn{color:var(--signal)}
/* On a phone the clauses inside a clause hang from the same edge as their parent, with
   room for "12.2.1" and "18.10" before the words start. */
@media (max-width:560px){.terms ol.tcl>li{padding-left:44px}.terms ol.tcl ol{margin-left:-44px}.terms ol.tcl ol>li{padding-left:56px}}
/* The cancellation form under the terms: a sheet with a line to write on after each label. */
.cform{margin-top:12px;background:var(--paper);padding:26px 28px;border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.cform h2{margin:0 0 6px}
.cform-box{margin-top:16px;max-width:680px}
.cform-box p{margin:0;padding:16px 0 8px;border-bottom:1px solid var(--rule-strong);text-align:left!important}
.cform-box .cform-to{padding-top:0;border-bottom:0;color:var(--ink);font-weight:500}
@media (max-width:560px){.cform{padding:18px 18px 20px}}
/* Privacy: how long things are kept, as pencil bars */
.kp-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;max-width:980px}
.kp-list li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 170px;align-items:center;gap:18px;padding:14px 0;border-top:1px dashed #C9C5BC}
.kp-list li:last-child{border-bottom:1px dashed #C9C5BC}
.kp-what{font-size:15.5px;line-height:1.45;color:var(--ink)}
.kp-bar{position:relative;height:14px;background-image:linear-gradient(90deg,rgba(92,100,112,.14) 1px,transparent 1px);background-size:10% 100%}
.kp-bar i{position:absolute;left:0;top:3px;bottom:3px;width:var(--w);background:var(--signal);border-top-right-radius:4px;border-bottom-left-radius:4px;transform-origin:left;transition:transform 1s cubic-bezier(.4,0,.2,1)}
.kp-list.kp-pd:not(.on) .kp-bar i{transform:scaleX(.02)}
.kp-how{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);text-align:right}
@media (max-width:760px){.kp-list li{grid-template-columns:1fr auto;gap:8px 14px}.kp-bar{grid-column:1 / -1;grid-row:2}}
/* Kept until somebody removes it: no end, so the bar is drawn broken. */
.kp-bar.kp-open i{background:repeating-linear-gradient(90deg,var(--signal) 0 8px,transparent 8px 14px)}
/* Privacy: what is kept on your device. The technical name sits under the plain one. */
.tbl-device td:first-child{width:32%}
.tbl-device td:last-child{width:24%}
.dv-n{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--slate);overflow-wrap:anywhere}
@media (max-width:640px){.tbl-device td:first-child,.tbl-device td:last-child{width:100%}}
/* Privacy: the "Stop counting" switch, shown only when its script runs. */
.count-switch{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px}
.count-switch[hidden]{display:none}
.count-switch p{margin:0}
.tbl-legal{width:100%;border-collapse:collapse;font-size:15px}
.tbl-legal th{text-align:left;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding:10px 12px;border-bottom:1.5px solid var(--ink)}
.tbl-legal td{padding:12px;vertical-align:top;border-bottom:1px solid var(--rule);line-height:1.5}
.tbl-legal.on-ink th{color:var(--on-ink-dim);border-bottom-color:var(--on-ink)}
.tbl-legal.on-ink td{color:var(--on-ink);border-bottom-color:rgba(255,255,255,.14)}
.tbl-legal.on-ink td b{color:var(--paper)}
.steps-mini{counter-reset:sm;list-style:none;margin:12px 0 0;padding:0}
.steps-mini li{counter-increment:sm;position:relative;padding:0 0 12px 40px;line-height:1.5}
.steps-mini li::before{content:counter(sm);position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--paper);background:var(--ink);border-top-right-radius:7px;border-bottom-left-radius:7px}
.steps-mini li:last-child::before{background:var(--signal)}
@media (max-width:640px){
  .tbl-legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-legal,.tbl-legal tbody,.tbl-legal tr,.tbl-legal td{display:block;width:100%}
  .tbl-legal tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .tbl-legal.on-ink tr{border-bottom-color:rgba(255,255,255,.14)}
  .tbl-legal td{padding:3px 0;border:0}
  .tbl-legal td::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:2px}
  .tbl-legal.on-ink td::before{color:var(--on-ink-dim)}
}
/* Phone type scale: this page’s share. The scale is described at the end of site.css. */
@media (max-width:520px){
  /* labels and tags */
  .lg-go{font-size:12px}
  /* secondary text */
  .lg-card-p,.terms .in-short,.kp-what{font-size:15px}
  /* body text inside cards and lists */
  .glance dd,.lg-card-t{font-size:17px}
}
/* On paper: each summary card stays whole (it moves to the next page rather than splitting),
   and "Read section 3" is left off, as paper can’t be clicked. */
@media print{
  .lg-card{break-inside:avoid;page-break-inside:avoid}
  .lg-go{display:none}
  .cform{break-inside:avoid;page-break-inside:avoid}
  .count-switch{display:none!important}
}