/* Shared styles for the Snowi legal & support pages (privacy, terms, support). */

:root{
  --snow:#F5F8FB; --ice:#DCE8F2; --ink:#1E252C; --ink-soft:rgba(30,37,44,.74);
  --copper:#D3A27C; --cinnamon:#A8714A; --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100svh; color:var(--ink);
  font-family:'Schibsted Grotesk','Helvetica Neue',system-ui,sans-serif;
  line-height:1.7;
  background:
    radial-gradient(900px 520px at 78% 6%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #F7FAFD 0%, #E9F0F6 100%);
  background-attachment:fixed;
}
.wrap{max-width:780px;margin:0 auto;padding:clamp(22px,5vw,54px)}

header.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:clamp(22px,4vw,38px)}
.wordmark{font-family:'Newsreader',Georgia,serif;font-size:1.3rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.wordmark em{font-style:italic;color:var(--cinnamon)}
.wordmark img.mark{width:26px;height:26px;border-radius:50%;vertical-align:-6px;margin-right:9px}
.back{font-size:.9rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid rgba(30,37,44,.2)}
.back:hover{color:var(--cinnamon);border-color:var(--cinnamon)}

h1{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:clamp(2rem,5vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin:.9em 0 .35em}
h2{font-family:'Newsreader',Georgia,serif;font-weight:600;font-size:clamp(1.2rem,2.6vw,1.55rem);margin:2.1em 0 .5em}
h3{font-size:1.02rem;font-weight:600;margin:1.5em 0 .35em;color:var(--ink)}
p,li{color:var(--ink-soft)}
strong{color:var(--ink);font-weight:600}
a{color:var(--cinnamon)}
a:hover{color:#8D5A38}
.lede{font-size:1.08rem;color:var(--ink);margin-top:0}
.updated{font-size:.9rem;color:rgba(30,37,44,.55);margin:0 0 2.2em}
ul{padding-left:1.2em;margin:.6em 0}
li{margin:.4em 0}
hr{border:0;border-top:1px solid rgba(30,37,44,.12);margin:2.4em 0}

.card{background:rgba(255,255,255,.72);border:1px solid rgba(30,37,44,.1);border-radius:var(--radius);padding:20px 22px;margin:1.6em 0}
.card h2,.card h3{margin-top:0}
.card.contact{display:flex;flex-direction:column;gap:6px}
.big-mail{font-family:'Newsreader',Georgia,serif;font-size:clamp(1.15rem,3vw,1.5rem)}
.steps{counter-reset:s;list-style:none;padding-left:0}
.steps li{counter-increment:s;position:relative;padding-left:2.1em;margin:.7em 0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:.1em;width:1.55em;height:1.55em;border-radius:50%;
  background:var(--ice);color:var(--ink);font-size:.82rem;font-weight:600;
  display:flex;align-items:center;justify-content:center
}
table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.94rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(30,37,44,.12);vertical-align:top}
th{font-weight:600;color:var(--ink);white-space:nowrap}
.note{font-size:.9rem;color:rgba(30,37,44,.6)}

.foot{
  margin-top:clamp(38px,7vw,68px);padding-top:20px;border-top:1px solid rgba(30,37,44,.12);
  display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:space-between;
  font-size:.88rem;color:rgba(30,37,44,.58)
}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid rgba(30,37,44,.18)}
.foot nav a:hover{color:var(--cinnamon);border-color:var(--cinnamon)}

:focus-visible{outline:2px solid var(--cinnamon);outline-offset:3px;border-radius:6px}

@media print{
  body{background:#fff}
  .card{background:#fff}
  .back{display:none}
}

/* Logo A: the dot of the i is a copper spark that rests, then turns a quarter and swells (4.6 s). */
.wordmark .word{display:inline-block;line-height:1;white-space:nowrap}
.wordmark .ii{position:relative;display:inline-block}
.wordmark .spark{position:absolute;left:.154em;top:.092em;width:.30em;height:.30em;transform:translate(-50%,-50%);overflow:visible}
.mk-tw{transform-box:fill-box;transform-origin:center;animation:mk-tw 4.6s ease-in-out infinite}
@keyframes mk-tw{0%,68%{transform:rotate(0) scale(1)}84%{transform:rotate(45deg) scale(1.22)}100%{transform:rotate(90deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.mk-tw{animation:none}}
