/* ===== MiSalon site pages (23 Sept). Loads after site.css (the home page's styles). ===== */
body{background:#F6F4EF}
a{color:inherit}
/* header: real links, trades menu, phone menu */
.hrow .logo img{height:26px;display:block}
.hnav a[aria-current]{color:#1B2A41;box-shadow:inset 0 -2px 0 #C2461F}
.tmenu{position:relative}
.tlist{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:8px;z-index:60}
.tlist a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:600;font-size:14.5px;color:var(--ink2)}
.tlist a:hover,.tlist a[aria-current]{background:#F6F4EF;color:#1B2A41}
.tlist img{height:22px}
.tmenu.open .tlist{display:block}
.trade{cursor:pointer}
.burger{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;padding:0}
.burger span,.burger span::before,.burger span::after{display:block;width:16px;height:2px;border-radius:2px;background:#1B2A41;content:"";position:relative}
.burger span::before{position:absolute;top:-5px}.burger span::after{position:absolute;top:5px}
.mnav{display:none;border-top:1px solid var(--line);background:#F6F4EF;padding:8px 20px 18px}
.mnav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700;color:var(--ink)}
.mnav .mtr{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 4px}
.mnav .mtr a{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13.5px;background:#fff}
header.open .mnav{display:block}
@media(min-width:1100px){.burger,.mnav{display:none!important}}
@media(max-width:420px){.hrow a.btn{padding:0 13px;font-size:13.5px}}

/* shared bits */
.pg h1{font-size:clamp(40px,6.6vw,76px);letter-spacing:-.045em;line-height:.98}
.hl2{color:#C2461F}
.mut{color:var(--mut)}
.onl{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.on .onl,.onl.on{opacity:1;transform:none}
.paper{background:#F6F4EF}.white{background:#fff}
.demo2{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8A8F98}

/* phone (used on trade pages) */
.pphone{position:relative;width:418px;height:876px;border-radius:58px;background:#070B12;padding:12px;box-shadow:0 50px 100px -30px rgba(15,26,43,.55),0 0 0 2px #26395A;transform-origin:top left;transform:scale(var(--s,.5))}
.pphone .scr{position:relative;width:394px;height:852px;border-radius:47px;overflow:hidden;background:#F6F4EF}
.pphone iframe{position:absolute;inset:0;width:394px;height:852px;border:0;pointer-events:none}
.pbox{position:relative;width:calc(418px*var(--s,.5));height:calc(876px*var(--s,.5))}

/* ===== trade page hero ===== */
.thero{background:#F6F4EF;padding:clamp(34px,6vw,70px) 0 clamp(40px,6vw,76px);overflow:hidden}
.thgrid{display:grid;gap:34px;align-items:center}
@media(min-width:960px){.thgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px}}
.tlogo{height:40px;display:block;margin-bottom:20px}
.thero h1{margin-top:14px}
.thero h1 em{font-style:normal;color:#C2461F;display:block}
.thero .lead{margin-top:18px;max-width:32em}
.thero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.thero .chips span{color:var(--ink2)}
.tvis{position:relative;max-width:560px;margin-left:auto;width:100%}
.tphoto{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/4.6;box-shadow:0 30px 70px rgba(15,26,43,.22)}
.tphoto img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);transition:transform 8s ease}
.on .tphoto img{transform:scale(1.1)}
.tphoto .tcov{background:linear-gradient(180deg,rgba(11,17,25,0) 55%,rgba(11,17,25,.55) 100%)}
.tvis .tcchip{top:16px;bottom:auto;left:16px;right:auto;max-width:calc(100% - 32px)}
.tvis .pbox{position:absolute;left:-28px;bottom:-40px;--s:.5}
@media(max-width:959px){.tvis{margin:0 auto 40px}.tvis .pbox{left:10px;bottom:-40px;--s:.42}}
@media(max-width:420px){.tvis .pbox{--s:.36}}
.tvis .demo2{position:absolute;right:14px;bottom:12px;color:#D7DCE4}

/* numbers strip on trade pages: static */
.numstrip .num b{font-variant-numeric:tabular-nums}

/* four cards */
.cards4{display:grid;gap:14px;margin-top:30px}
@media(min-width:700px){.cards4{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cards4{grid-template-columns:repeat(4,1fr)}}
.c4{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;transition:transform .25s,box-shadow .25s}
.c4:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.c4 .ico{width:46px;height:46px;border-radius:14px;background:#1B2A41;display:grid;place-items:center;margin-bottom:18px}
.c4 .ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.c4 h3{font-size:19px}
.c4 p{margin-top:8px;color:var(--mut);font-size:15px}
.c4 .n{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:#C2461F;margin-bottom:8px}

/* power-cut feature: navy */
.pcut{background:#0F1A2B;color:#fff;overflow:hidden}
.pcgrid{display:grid;gap:30px;align-items:center}
@media(min-width:900px){.pcgrid{grid-template-columns:1fr 1fr;gap:60px}}
.pcut h2{color:#fff;margin-top:12px}
.pcut h2 .dim{color:#8FA0B4}
.pcut .kick{color:#FF9878}
.pcut p{color:#AEB9C7;margin-top:14px;max-width:32em;font-size:clamp(16px,2vw,18px)}
.pcut .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35);margin-top:24px}
.pcvis{position:relative;display:flex;justify-content:center;min-height:calc(876px*.62)}
.pcvis .pbox{--s:.62}
.pcvis .sig{position:absolute;left:0;top:18%;display:flex;flex-direction:column;gap:10px}
.sigrow{display:flex;align-items:center;gap:10px;background:#13223A;border:1px solid #24364F;border-radius:14px;padding:10px 14px;font-size:13.5px;color:#D7DCE4;opacity:0;transform:translateX(-14px);transition:all .6s cubic-bezier(.2,.7,.2,1)}
.on .sigrow{opacity:1;transform:none}
.sigrow:nth-child(2){transition-delay:.25s}.sigrow:nth-child(3){transition-delay:.5s}
.sigrow i{width:8px;height:8px;border-radius:50%;background:#7FE3AE;box-shadow:0 0 10px #7FE3AE;flex:none}
.sigrow i.off{background:#FF9878;box-shadow:0 0 10px #FF9878}
.sigrow b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:#fff}
@media(max-width:899px){.pcvis .sig{display:none}.pcvis{min-height:calc(876px*.52)}.pcvis .pbox{--s:.52}}

/* ===== pricing page ===== */
.ptop{background:#F6F4EF;padding-top:clamp(40px,6vw,76px)}
.ptop .lead{margin-top:16px;max-width:36em}
.ptop .plans{margin-top:34px}
.ptop .plan{background:#fff}
.ptop .plan.top{background:#1B2A41}
.ptop .trust{margin-top:22px}
.ptop .more{margin-right:18px}
.pinc{display:grid;gap:30px}
@media(min-width:960px){.pinc{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}
.inclist{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:600px){.inclist{grid-template-columns:1fr 1fr;column-gap:26px}}
.inclist li{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-weight:600;color:var(--ink2);font-size:15px}
.inclist li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:#1B2A41 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7 9.5 16.5 5 12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pinc .calc{position:sticky;top:90px}

/* ===== signup ===== */
.suwrap{display:grid;gap:0;min-height:calc(100vh - 62px)}
@media(min-width:960px){.suwrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.suleft{background:#0F1A2B;color:#fff;padding:clamp(32px,6vw,72px) clamp(20px,5vw,64px);position:relative;overflow:hidden}
.suleft .in{position:relative;max-width:520px;margin-left:auto}
.suleft .kick{color:#FF9878}
.suleft h1{color:#fff;margin-top:14px;font-size:clamp(38px,5.4vw,64px)}
.suleft h1 em{font-style:normal;color:#FF9878}
.suleft p{color:#AEB9C7;margin-top:16px;font-size:clamp(16px,2vw,18px)}
.suleft .ticks li{color:#D7DCE4}
.suleft .ticks li::before{background-color:#FF9878}
.suleft .trust{color:#8FA0B4;margin-top:26px}
.sulogos{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.sulogos span{display:flex;align-items:center;background:#fff;border-radius:12px;padding:8px 12px;opacity:.45;transition:opacity .3s,box-shadow .3s}
.sulogos span.on{opacity:1;box-shadow:0 0 0 3px #FF9878}
.sulogos img{height:22px;display:block}
.surings{position:absolute;right:-160px;bottom:-160px;width:440px;height:440px;opacity:.9;pointer-events:none}
.surings .r1{transform-origin:0 0;animation:rot 60s linear infinite}
.suright{padding:clamp(28px,5vw,64px) clamp(16px,5vw,64px);background:#F6F4EF}
.suform{max-width:540px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(20px,4vw,36px);box-shadow:var(--sh)}
.fsec{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.fsec h2{font-size:22px;letter-spacing:-.02em}
.fsec+label{margin-top:10px}
.suform .stepn{margin:0}
.suform hr{border:0;border-top:1px solid var(--line);margin:28px 0 22px}
.suform label{display:block;margin-top:16px;margin-bottom:7px;font-weight:700;font-size:14.5px;color:var(--ink)}
.suform input[type=text],.suform input[type=email],.suform input[type=tel],.suform input[type=password],.suform input:not([type]),.suform select{width:100%;height:52px;border:1.5px solid #DCDDE1;border-radius:14px;padding:0 16px;font:500 16px "Plus Jakarta Sans",sans-serif;color:var(--ink);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.suform select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5L5 7l3.5-3.5' fill='none' stroke='%231B2A41' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center/12px no-repeat;padding-right:40px}
.suform input:focus,.suform select:focus{border-color:#1B2A41;box-shadow:0 0 0 4px rgba(27,42,65,.12)}
.suform input::placeholder{color:#A0A4AB}
.suform .fine{margin:7px 0 0;font-size:13px;color:var(--mut)}
.two{display:grid;gap:0 14px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
.tick2{display:flex!important;gap:12px;align-items:flex-start;font-weight:600!important;margin-top:24px!important;cursor:pointer}
.tick2 input{width:22px;height:22px;accent-color:#1B2A41;margin:0;flex:none}
.tick2 a{color:#1B2A41}
.suform .btn{width:100%;margin-top:22px;height:56px;font-size:17px;cursor:pointer}
.suform .after{margin-top:12px;text-align:center;font-size:13px;color:var(--mut)}
.msg{margin-top:12px;font-size:14px}
.signhead .hnav{display:flex!important;margin-left:auto}
@media(max-width:560px){.signhead .hnav a:not(.btn){display:none}}
/* fixes */
.pcvis{align-items:center;gap:26px}
.pcvis .sig{position:static;flex:none}
.band .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.band .btn.coral{background:#fff;color:#1B2A41}
.plan ul{align-content:start}
.signhead .hnav{align-items:center}
.sulogos span{padding:10px 14px;opacity:.6}
.sulogos img{height:26px}
.sulogos span.on{opacity:1}
@media(max-width:959px){.surings,.suleft .pbox{display:none}}
.suleft .pbox{position:absolute;right:48px;bottom:-110px;--s:.5;z-index:1}
.suleft .pbox .pphone{box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 2px #34496A}

/* ===== live site, 23 Sept: the phones show a screenshot, not an iframe ===== */
.h2scr img,.pphone .scr img{position:absolute;inset:0;width:394px;height:852px;border:0;display:block;object-fit:cover}

/* ===== pages that were not drawn (features, why, compare, questions, company, privacy, terms) ===== */
.ptop h1{margin-top:14px}
.ptop h1 em,.pgh h1 em{font-style:normal;color:#C2461F}
.pgh{background:#F6F4EF;padding-top:clamp(40px,6vw,76px)}
.pgh .lead{margin-top:16px;max-width:38em}
.pgh .cta,.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.shot{border-radius:24px;border:1px solid var(--line);overflow:hidden;background:#fff;box-shadow:var(--sh)}
.shot img{display:block;width:100%;height:auto}
.prose{max-width:74ch}
.prose h2{margin-top:36px;font-size:clamp(23px,3.2vw,30px)}
.prose h1+p{margin-top:16px}
.prose p{margin-top:12px;font-size:16px;line-height:1.62}
.prose ul,.prose ol{margin:14px 0 0;padding-left:20px}
.prose li{margin:7px 0;color:var(--ink2);font-size:16px;line-height:1.55}
.prose a{color:#1B2A41}
.prose .lbl,.prose .kick{display:block;margin-bottom:10px}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.pcut h1{color:#fff;margin-top:14px}
.pcut h1 em{font-style:normal;color:#FF9878}
.pcut .lead,.pcut .fine{color:#AEB9C7}
.pcut .ctable{background:#13223A;border-color:#24364F}
.pcut .cr{border-color:#24364F}
.pcut .cr span{color:#D7DCE4}
.pcut .ch span{color:#8FA0B4}