/* GetSalon additions on top of the chandler site.css (recoloured). */

/* hero: module strip under the headline */
.hero{padding-bottom:72px}
.hero-mods{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:56px}
.hero-mods a{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#E9E3EC;text-decoration:none;font-size:15px;background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.hero-mods a:hover{border-color:var(--orange);background:rgba(232,131,122,.08)}
.hero-mods svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.6}

/* icon panels stand in for screenshots */
.icon-panel{display:grid;place-items:center;min-height:360px;background:radial-gradient(400px 260px at 70% 30%,rgba(232,131,122,.18),transparent 70%),var(--soft)}
.icon-panel .big-i{width:140px;height:140px;stroke:var(--ink);fill:none;stroke-width:1.1;opacity:.85}
.icard{border-radius:20px;background:#fff;color:var(--ink);padding:30px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 70px rgba(0,0,0,.35);max-width:420px;justify-self:end}
.icard .icard-i{width:56px;height:56px;stroke:var(--orange);fill:none;stroke-width:1.5}
.icard b{font-family:Archivo,sans-serif;font-size:28px;letter-spacing:-.02em}
.icard span{color:var(--muted)}
.icard em{font-style:normal;font-weight:600;color:var(--orange-d)}

/* who it's for */
.bento.who{grid-template-columns:repeat(4,1fr);margin-top:40px}
@media (max-width:900px){.bento.who{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bento.who{grid-template-columns:1fr}}

/* packs table */
.ptable{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff;margin:8px 0 28px}
.ptable table{width:100%;border-collapse:collapse;min-width:560px}
.ptable th,.ptable td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);font-size:16px;vertical-align:top}
.ptable th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ptable tr:last-child td{border-bottom:0}
.ptable td small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}

/* ---------- signup ---------- */
.signup{padding-top:56px}
.su{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@media (max-width:960px){.su{grid-template-columns:minmax(0,1fr)}}
.su-step{border:1px solid var(--line);border-radius:18px;padding:26px;margin-bottom:16px;background:#fff}
.su-step h2{font-size:21px;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.su-step h2 .n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:600 13px Plex,sans-serif}
.su-hint,.su-note{color:var(--muted);font-size:14.5px;margin-top:10px}
.su-note{background:var(--soft);border-radius:12px;padding:12px 14px}
.tchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tchip{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font:inherit;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:14px;cursor:pointer;color:var(--ink)}
.tchip svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.5;margin-bottom:4px}
.tchip b{font-size:16px}
.tchip b i{font-style:normal;font-size:11px;background:var(--soft);border-radius:999px;padding:2px 8px;margin-left:4px;vertical-align:2px}
.tchip small{color:var(--muted);font-size:13px}
.tchip[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.stepper{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.stepper button{width:48px;border:0;background:var(--soft);font-size:22px;cursor:pointer;color:var(--ink)}
.stepper input{width:76px;height:50px;border:0;text-align:center;font:600 19px Plex,sans-serif;color:var(--ink)}
.packs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pack{border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:7px 14px;font:500 14px Plex,sans-serif;cursor:pointer;color:var(--ink)}
.pack:hover{border-color:var(--ink)}
.mrows{display:grid;gap:10px}
.mrow{display:grid;grid-template-columns:20px 28px minmax(0,1fr) auto;gap:12px;align-items:start;border:1.5px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}
.mrow input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--ink)}
.mrow .mrow-i{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.5}
.mrow b{display:block;font-size:16px}
.mrow small{display:block;color:var(--muted);font-size:14px}
.mrow em{font-style:normal;color:var(--muted);font-size:13.5px;white-space:nowrap}
.mrow.on{border-color:var(--ink)}
.mrow.locked{background:var(--soft);cursor:default}
@media (max-width:560px){.mrow{grid-template-columns:20px minmax(0,1fr)}.mrow .mrow-i{display:none}.mrow em{grid-column:2}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.grid2 label{display:block;font-size:14px;font-weight:600}
.grid2 .full{grid-column:1/-1}
.grid2 input,.grid2 textarea{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1.5px solid var(--line);border-radius:10px;font:16px Plex,sans-serif;color:var(--ink);background:#fff}
.grid2 input:focus,.grid2 textarea:focus{outline:none;border-color:var(--ink)}
.grid2 .bad{border-color:#D64545}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.su-side{position:sticky;top:96px}
@media (max-width:960px){.su-side{position:static}}
.sum{background:var(--bg-dark);color:#fff;border-radius:20px;padding:26px}
.sum h3{font-size:16px;color:#BDB3C2;font-family:Plex,sans-serif;font-weight:600;margin-bottom:12px}
.sum-row{display:flex;justify-content:space-between;gap:10px;font-size:15px;padding:3px 0}
.sum-row.dim{color:#A99FAE;font-size:13.5px}
.sum-hr{border-top:1px solid rgba(255,255,255,.14);margin:14px 0}
.sum-k{color:#A99FAE;font-size:13.5px}
.sum-big{font:700 44px Archivo,sans-serif;letter-spacing:-.03em;margin:2px 0}
.sum-inc{padding-left:18px;margin:8px 0 18px;color:#D9D1DD;font-size:14px}
.sum .btn.blk{width:100%;justify-content:center}
.sum-err{color:#FFB3A8;font-size:14px;min-height:1em;margin:10px 0 8px}
.su-done{max-width:640px;margin:0 auto;text-align:left;padding:40px 0}
.btn.blk{display:flex;width:100%;justify-content:center}
[hidden]{display:none!important}