/* Silverlion Technologies website. Plain CSS, no build step, no trackers.
   Same family look as the MiSalon website; Silverlion's own colours come from its logo: gold on black. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --ink:#0E0F12; --ink2:#34373E; --mut:#5A5F69; --line:#E8E6E1; --soft:#F7F6F2; --card:#FFFFFF;
  --black:#0A0A0B; --black2:#141417; --dline:#26262B;
  /* gold from the logo: bronze edges, pale gold light in the middle */
  --gold:#C9A55C; --gold-l:#F4EA9A; --gold-m:#B38F4F; --bronze:#8F6424;
  --gold-d:#7A5418;            /* gold for text on white: 6.7:1 */
  --gold-soft:#F6EEDC;
  --silver:#A9B0BA; --steel:#5E6673;
  --hl:linear-gradient(90deg,#6E4A12 0%,#A57F36 48%,#7A5418 100%);
  --hl-dark:linear-gradient(90deg,#C9A55C 0%,#F4EA9A 50%,#C9A55C 100%);
  --metal:linear-gradient(100deg,#8F6424 0%,#C9A55C 32%,#F4EA9A 52%,#C9A55C 72%,#8A5E22 100%);
  --wrap:1200px;
  --sh-sm:0 1px 2px rgba(14,15,18,.06),0 2px 8px rgba(14,15,18,.05);
  --sh-md:0 2px 6px rgba(14,15,18,.05),0 14px 34px rgba(14,15,18,.09);
  --sh-lg:0 4px 12px rgba(14,15,18,.08),0 30px 70px rgba(14,15,18,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#fff;color:var(--ink);font:17px/1.65 "Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (min-width:900px){body{font-size:18px}}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-d);text-underline-offset:3px}
a:hover{color:#5A3D0E}
b,strong{font-weight:700}
h1,h2,h3{color:var(--ink);line-height:1.08;letter-spacing:-.035em;margin:0 0 14px;text-wrap:balance;font-weight:800}
h1{font-size:clamp(40px,6.2vw,72px)}
h2{font-size:clamp(31px,4.3vw,50px)}
h3{font-size:21px;line-height:1.25;letter-spacing:-.02em}
p{margin:0 0 16px;max-width:62ch}
ul{margin:0 0 16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 20px}}
.hl{background:var(--hl);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dark .hl,.band .hl{background-image:var(--hl-dark)}
@media (forced-colors:active){.hl{color:inherit;background:none}}
.lbl{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);font-weight:800;margin-bottom:14px}
.muted{color:var(--mut)}
.fine{font-size:15px;color:var(--mut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:12px;color:#fff}
:focus-visible{outline:3px solid var(--gold-d);outline-offset:3px;border-radius:6px}
::selection{background:#F1E3BD;color:var(--ink)}
[id]{scroll-margin-top:92px}
/* a detail the owner still has to fill in */
.ph{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-style:normal;font-weight:700;font-size:.92em;color:#6B4A12;background:#FFF6DF;border:1.5px dashed #C9A55C;border-radius:8px;padding:0 8px;line-height:1.6}

/* buttons: solid ink pill, outlined pill, gold pill for dark panels */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:700;font-size:16px;line-height:1.2;padding:14px 26px;min-height:52px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.btn:hover{background:#2A2C33;border-color:#2A2C33;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(14,15,18,.18)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:#fff;color:var(--ink);border-color:#CFCDC7}
.btn.ghost:hover{border-color:var(--ink);background:#fff;color:var(--ink);box-shadow:none}
.btn.gold{background:var(--metal);background-size:140% 100%;background-position:0 0;color:#16120A;border-color:transparent}
.btn.gold:hover{background-position:100% 0;color:#16120A;box-shadow:0 10px 26px rgba(201,165,92,.35)}
.btn.line{background:transparent;color:#fff;border-color:#4A4A52}
.btn.line:hover{border-color:#fff;color:#fff;background:transparent;box-shadow:none}
.btn.sm{padding:10px 20px;min-height:44px;font-size:15px}
.btn .arr{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(14,15,18,.07)}
.nav{position:relative;display:flex;align-items:center;gap:20px;min-height:78px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);border-radius:12px}
.brand img{height:54px;width:auto;max-width:none;border-radius:10px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 16px rgba(14,15,18,.14)}
.brand span{font-weight:800;font-size:16px;letter-spacing:-.02em;line-height:1.15}
.brand span small{display:block;font-size:12.5px;font-weight:600;color:var(--mut);letter-spacing:0}
.brand:hover{color:var(--ink)}
.nav .links{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav .links a:not(.btn){color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:600;padding:8px 14px;border-radius:999px;transition:background .15s}
.nav .links a:not(.btn):hover{background:var(--soft);color:var(--ink)}
.nav .links a[aria-current="page"]:not(.btn){background:var(--gold-soft);color:#5A3D0E}
.nav .links .btn{margin-left:10px}
.burger{display:none}
@media (max-width:820px){
  .nav{min-height:68px;gap:12px}
  .brand img{height:46px}
  .brand span{font-size:15px}
  header.js .burger{display:inline-grid;place-items:center;margin-left:auto;width:46px;height:46px;border-radius:999px;border:1.5px solid #D3D1CB;background:#fff;color:var(--ink);cursor:pointer;padding:0}
  .burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease),background-color .2s}
  .burger span{position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0}
  .burger span::before{top:-6px}.burger span::after{top:6px}
  header.open .burger span{background:transparent}
  header.open .burger span::before{transform:translateY(6px) rotate(45deg)}
  header.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
  /* without script the links simply wrap under the logo */
  .nav .links{margin-left:0;width:100%;padding-bottom:10px}
  header.js .nav .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:#fff;padding:10px 24px 24px;border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(14,15,18,.12);max-height:calc(100vh - 68px);overflow:auto}
  header.js.open .nav .links{display:flex}
  header.js .nav .links a:not(.btn){font-size:18px;padding:13px 14px;border-radius:12px}
  header.js .nav .links .btn{margin:12px 0 0;width:100%}
}
@media (max-width:600px){header.js .nav .links{left:0;right:0;padding:8px 20px 22px}}
@media (max-width:380px){.brand span{display:none}}

/* hero: centred, big, calm, with a soft gold and silver glow */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:84px 0 64px;text-align:center}
/* let the glow fade out over the next section instead of stopping at a hard edge */
@supports (overflow:clip){.hero{overflow:visible;overflow-x:clip}}
.hero + section,.hero + div{position:relative}
.hero::before{content:"";position:absolute;z-index:-1;left:50%;top:-180px;width:1300px;height:720px;margin-left:-650px;
  background:radial-gradient(34% 42% at 30% 46%,rgba(214,182,106,.30),transparent 72%),radial-gradient(32% 40% at 70% 40%,rgba(169,176,186,.34),transparent 72%),radial-gradient(26% 30% at 52% 70%,rgba(244,234,154,.30),transparent 72%)}
.hero .lbl{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);color:var(--ink2);letter-spacing:.01em;text-transform:none;font-size:14.5px;font-weight:700;padding:7px 16px 7px 12px;border-radius:999px;margin-bottom:26px}
.hero .lbl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(201,165,92,.22)}
.hero h1{margin:0 auto 22px;max-width:18ch}
.hero p.big{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--mut);margin:0 auto;max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 0;justify-content:center}
.hero.page{padding:76px 0 56px}
.hero.page h1{font-size:clamp(38px,5.4vw,64px)}
@media (max-width:600px){.hero,.hero.page{padding:48px 0 40px}.hero h1{letter-spacing:-.04em}.cta .btn{flex:1 1 100%}.hero::before{top:-120px}}

/* dark stage: the product on black with the logo's gold glow */
.stagewrap{padding:0 0 24px}
.dark{position:relative;isolation:isolate;overflow:hidden;background:var(--black);color:#D9DBE0;border-radius:32px}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(42% 60% at 12% 0%,rgba(201,165,92,.34),transparent 70%),radial-gradient(38% 55% at 96% 100%,rgba(169,176,186,.24),transparent 70%),radial-gradient(30% 40% at 60% 110%,rgba(244,234,154,.14),transparent 70%)}
.dark h2,.dark h3{color:#fff}
.dark .lbl{color:var(--gold)}
.stage-panel{padding:64px 64px 0}
.stage{position:relative;max-width:1000px;margin:0 auto;padding:0 7% 0 0}
.frame{background:#fff;overflow:hidden}
.frame img{width:100%}
.frame.browser{border-radius:14px 14px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:0;box-shadow:0 -10px 60px rgba(201,165,92,.18)}
.frame.browser .bar{display:flex;gap:7px;align-items:center;height:30px;padding:0 14px;background:#F2F2F0;border-bottom:1px solid #E4E3DF}
.frame.browser .bar i{width:10px;height:10px;border-radius:50%;background:#D5D4D0}
.frame.browser .bar i:first-child{background:var(--gold)}
.frame.phone{border-radius:38px;border:9px solid #1A1A1E;box-shadow:var(--sh-lg);background:#1A1A1E}
.frame.phone img{border-radius:29px}
.stage .frame.phone{position:absolute;right:0;bottom:34px;width:24%;min-width:104px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px rgba(0,0,0,.5)}
.stage-browser{max-height:520px;overflow:hidden}
@media (max-width:760px){
  .dark{border-radius:24px}
  .stage-panel{padding:36px 20px 0}
  .stage{padding-right:16%}
  .frame.browser{border-radius:10px 10px 0 0}
  .frame.browser .bar{height:16px;gap:4px;padding:0 8px}
  .frame.browser .bar i{width:6px;height:6px}
  .stage .frame.phone{width:30%;top:-12px;bottom:auto;border-width:5px;border-radius:20px}
  .stage .frame.phone img{border-radius:15px}
}

/* quiet facts under the stage */
.facts{list-style:none;margin:0;padding:48px 0 8px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.facts li{text-align:center;padding:4px 8px}
.facts b{display:block;font-size:clamp(34px,4vw,50px);line-height:1;letter-spacing:-.045em;font-weight:800;margin-bottom:10px}
.facts b span{background:var(--hl);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts li > span{display:block;font-size:15.5px;font-weight:600;color:var(--mut);line-height:1.45;max-width:24ch;margin:0 auto}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr;gap:30px 12px;padding-top:40px}}

/* section bands */
section{padding:100px 0}
section.closing{padding-top:0}
@media (max-width:760px){section{padding:64px 0}}
.band-soft + section.closing{padding-top:100px}
@media (max-width:760px){.band-soft + section.closing{padding-top:64px}}
footer .legalrow:first-child{border-top:0;padding-top:0}
.band-soft{background:var(--soft)}
.band-tint{background:linear-gradient(180deg,#FBF7EE 0%,#F7F6F2 55%,#F3F4F6 100%)}
.head{max-width:780px;margin:0 0 52px}
.head.c{margin-left:auto;margin-right:auto;text-align:center}
.head.c p{margin-left:auto;margin-right:auto}
.head p{font-size:clamp(17px,1.5vw,20px);color:var(--mut)}
@media (max-width:600px){.head{margin-bottom:36px}}

/* product cards */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1060px){.products{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.products{grid-template-columns:1fr;gap:14px}}
.product{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(14,15,18,.07);border-radius:22px;padding:18px 24px 24px;box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.product:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(201,165,92,.5)}
.product::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--metal);opacity:.9}
.product .logo{height:62px;width:auto;max-width:100%;margin:0 0 6px -8px;object-fit:contain;object-position:left center}
.product .trade{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);font-weight:800;margin:0 0 6px}
.product h3{font-size:22px;margin:0 0 8px}
.product p{font-size:16px;line-height:1.6;color:var(--mut);margin:0 0 18px}
.product .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--ink);text-decoration:none}
.product .go::after{content:"";position:absolute;inset:0;border-radius:22px}
.product .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.product:hover .go svg{transform:translate(2px,-2px)}
.product .go:focus-visible{outline:none}
.product .go:focus-visible::after{outline:3px solid var(--gold-d);outline-offset:3px}

/* feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.two{grid-template-columns:1fr 1fr}
.cards.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1060px){.cards,.cards.four{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards,.cards.two,.cards.four{grid-template-columns:1fr;gap:14px}}
.card{background:var(--card);border:1px solid rgba(14,15,18,.07);border-radius:20px;padding:30px 28px;box-shadow:var(--sh-sm);transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.card h3{margin-bottom:8px}
.card p{font-size:16.5px;line-height:1.6;color:var(--mut);margin:0}
.card p + p{margin-top:10px}
.card .ico{width:50px;height:50px;border-radius:15px;background:var(--black);color:var(--gold-l);display:grid;place-items:center;margin-bottom:22px;box-shadow:0 8px 18px rgba(14,15,18,.18);position:relative;overflow:hidden}
.card .ico::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 30% 20%,rgba(201,165,92,.45),transparent 70%)}
.card .ico svg{position:relative;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.card{padding:24px 22px}}

/* text beside a picture */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.feat.flip .txt{order:2}
.feat h2{font-size:clamp(31px,3.8vw,46px)}
.feat .txt > p{color:var(--mut);font-size:clamp(17px,1.4vw,19px)}
.tickl{list-style:none;margin:24px 0 0;padding:0}
.tickl li{position:relative;padding:7px 0 7px 38px;color:var(--ink2);font-weight:500}
.tickl li::before{content:"";position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:50%;background:#F6EEDC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M8 13.4l3.2 3.2L18 9.6' fill='none' stroke='%237A5418' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat}
.feat .btn{margin-top:22px}
.media{padding:48px 44px}
.media .frame.phone{max-width:290px;margin:0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px rgba(0,0,0,.5)}
.media.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end;padding:44px 36px 0}
.media.pair .frame.phone{border-bottom:0;border-radius:32px 32px 0 0}
.media.pair .frame.phone img{border-radius:24px 24px 0 0}
.media.pair .frame.phone:first-child{margin-bottom:0;transform:translateY(0)}
.media.pair .frame.phone:last-child{margin-top:48px}
@media (max-width:1060px){.feat{grid-template-columns:1fr;gap:40px}.feat.flip .txt{order:0}}
@media (max-width:600px){.media{padding:28px 20px}.media .frame.phone{max-width:220px}.media.pair{padding:28px 18px 0;gap:12px}.media.pair .frame.phone{border-width:6px;border-radius:24px 24px 0 0}.media.pair .frame.phone img{border-radius:18px 18px 0 0}}

/* trade faces on the products page */
.faces{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.faces{grid-template-columns:1fr;gap:14px}}
.face{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(14,15,18,.07);border-radius:22px;padding:20px 30px 28px;box-shadow:var(--sh-sm)}
.face::before{content:"";position:absolute;left:30px;right:30px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--metal)}
.face .logo{height:70px;width:auto;max-width:100%;margin:0 0 4px -9px;object-fit:contain;object-position:left center}
.face .trade{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-d);font-weight:800;margin:0 0 4px}
.face h3{margin:0 0 6px;font-size:24px}
.face p{margin:0;color:var(--mut);font-size:16.5px}
.face ul{margin:12px 0 18px;padding:0;list-style:none;font-size:16px;color:var(--ink2)}
.face ul li{position:relative;padding:4px 0 4px 20px}
.face ul li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.face .go{margin-top:auto;font-weight:700;font-size:16px}
@media (max-width:600px){.face{padding:18px 22px 24px}.face::before{left:22px;right:22px}.face .logo{height:60px}}

/* company facts and contact */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
@media (max-width:1060px){.split{grid-template-columns:1fr;gap:36px}}
.prose p{color:var(--ink2);font-size:clamp(17px,1.4vw,19px)}
.prose h2{font-size:clamp(28px,3.2vw,38px);margin-top:8px}
.factbox{background:#fff;border:1px solid rgba(14,15,18,.08);border-radius:24px;padding:28px 30px;box-shadow:var(--sh-md)}
.factbox h3{font-size:18px;margin:0 0 12px}
.factbox dl{margin:0}
.factbox dt{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:800;margin-top:16px}
.factbox dt:first-child{margin-top:0}
.factbox dd{margin:2px 0 0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:760px){.contacts{grid-template-columns:1fr;gap:14px}}
.contact{background:#fff;border:1px solid rgba(14,15,18,.07);border-radius:22px;padding:28px;box-shadow:var(--sh-sm)}
.contact h2{font-size:22px;letter-spacing:-.02em;margin:0 0 6px}
.contact p{color:var(--mut);font-size:16.5px;margin:0 0 14px}
.contact .mail{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(17px,1.6vw,19px);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;overflow-wrap:anywhere}
.contact .mail:hover{color:var(--gold-d)}
.contact .ico{width:46px;height:46px;border-radius:14px;background:var(--black);color:var(--gold-l);display:grid;place-items:center;margin-bottom:18px}
.contact .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* closing call to action */
.band{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:88px 40px;text-align:center;color:#D9DBE0;background:var(--black)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 80% at 8% 0%,rgba(201,165,92,.40),transparent 70%),radial-gradient(40% 80% at 94% 100%,rgba(169,176,186,.26),transparent 70%)}
.band h2{color:#fff;max-width:20ch;margin:0 auto 18px}
.band p{margin:0 auto 32px;color:#C9CCD3;font-size:clamp(17px,1.5vw,20px)}
.band .cta{margin:0}
.band :focus-visible{outline-color:var(--gold-l)}
@media (max-width:600px){.band{padding:56px 22px;border-radius:24px}}

/* footer */
footer{background:var(--black);color:#A9ADB6;padding:64px 0 36px;font-size:15.5px}
footer a{color:#DCDEE3;text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff;text-decoration:underline}
footer strong{color:#fff;display:block;margin-bottom:8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
footer p{color:#A9ADB6}
footer :focus-visible{outline-color:var(--gold-l)}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer .flogo{height:92px;width:auto;margin:0 0 18px}
footer .legalrow{border-top:1px solid var(--dline);padding-top:26px;font-size:14.5px;line-height:1.8;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
footer .legalrow a{display:inline;padding:0}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr;gap:28px}footer .cols > div:first-child{grid-column:1/-1}}
@media (max-width:760px){footer{padding:48px 0 32px}footer .flogo{height:76px}}

/* legal documents */
.legal section{padding:0 0 100px;background:linear-gradient(180deg,#FBF5E8 0,#F7F6F2 240px,#fff 560px)}
.legal .wrap{padding-top:76px;max-width:868px}
.legal .lbl{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;letter-spacing:.02em;text-transform:none;font-size:14px;color:var(--ink2);font-weight:700}
.legal h1{font-size:clamp(38px,5vw,60px);margin:0 0 22px}
.legal h1 + p{font-size:clamp(18px,1.6vw,21px);color:var(--ink2);padding-bottom:40px;border-bottom:1px solid var(--line);margin-bottom:8px;max-width:none}
.legal h2{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.025em;margin:52px 0 14px}
.legal p,.legal li{max-width:70ch;color:var(--ink2);line-height:1.75}
.legal ul{padding-left:0;list-style:none}
.legal li{position:relative;padding:5px 0 5px 26px}
.legal li::before{content:"";position:absolute;left:4px;top:18px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.legal .fine{margin-top:52px;padding:18px 22px;background:var(--soft);border-radius:14px;font-size:15px;max-width:none}
@media (max-width:600px){.legal .wrap{padding-top:44px}.legal section{padding-bottom:64px}}

/* not found */
.nf{min-height:62vh;display:grid;place-items:center}
.nf .code{font-size:clamp(90px,16vw,180px);font-weight:800;letter-spacing:-.06em;line-height:1;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 8px}

/* gentle entrance: movement only, so nothing is ever hidden if animation does not run */
@media (prefers-reduced-motion:no-preference){
  .stage{animation:rise 1s var(--ease)}
  .stage .frame.phone{animation:rise 1.3s var(--ease)}
  @keyframes rise{from{transform:translateY(28px)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* page bits */
section.pt0{padding-top:0}
.prodlogo{height:76px;width:auto;margin:0 0 10px -10px}
.values .card h3{font-size:20px}
.note{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.note{grid-template-columns:1fr;gap:14px}}
.note > div{background:var(--soft);border-radius:18px;padding:22px 26px}
.note h2{font-size:18px;letter-spacing:-.01em;margin:0 0 6px}
.note p{margin:0;color:var(--ink2);font-size:16.5px}
.factbox .more{display:inline-block;margin-top:20px;font-weight:700;font-size:16px}
body:has(.nf){min-height:100vh;display:flex;flex-direction:column}
body:has(.nf) main{flex:1 0 auto;display:grid}