/* Amvela site. Shared by index.html, terms.html and privacy.html.
   No webfonts on purpose: a Google Fonts request sends every visitor's IP to a
   third party, which is a real GDPR problem in the UK and EU and a strange way
   to open a privacy policy. System stack, set carefully instead. */

:root {
  --paper:#FBF9FA; --surface:#FFFFFF; --ink:#141118; --muted:#6E6674;
  --accent:#D8395A; --link:#C42C4B; --line:#E8E2E5; --note:#FCF3F5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#141118; --surface:#1E1A22; --ink:#F0ECF2; --muted:#A79FAE;
    --accent:#FF6B87; --link:#FF8DA1; --line:#2C2632; --note:#241C22;
  }
}
:root[data-theme="dark"] {
  --paper:#141118; --surface:#1E1A22; --ink:#F0ECF2; --muted:#A79FAE;
  --accent:#FF6B87; --link:#FF8DA1; --line:#2C2632; --note:#241C22;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.wrap { width:min(100% - 2.5rem, 68rem); margin-inline:auto; }
.prose { max-width:36em; }
a { color:var(--link); }
h1,h2,h3 { line-height:1.15; text-wrap:balance; margin:0; letter-spacing:-0.02em; }
h1 { font-size:clamp(2.1rem,5.2vw,3.5rem); font-weight:700; }
h2 { font-size:clamp(1.5rem,3vw,2.05rem); font-weight:650; }
h3 { font-size:1.06rem; font-weight:650; letter-spacing:-0.01em; }
p { margin:0; }
.brandmark { display:block; height:26px; width:auto; color:var(--ink); }

header { border-bottom:1px solid var(--line); }
header .wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 0; }
header a.home { display:block; line-height:0; }
.signin {
  font-size:0.9rem; font-weight:550; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:0.45rem 1rem; white-space:nowrap;
}
.signin:hover { border-color:var(--accent); color:var(--accent); }

/* --- home ---------------------------------------------------------------- */
.hero { padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem); }
.hero p.lead { font-size:clamp(1.08rem,2.1vw,1.28rem); color:var(--muted); margin-top:1.35rem; max-width:34em; }
.cta { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2.25rem; }
.btn {
  display:inline-block; text-decoration:none; font-weight:600; font-size:0.98rem;
  padding:0.72rem 1.5rem; border-radius:999px; border:1px solid transparent;
}
.btn--solid { background:var(--accent); color:#FFFFFF; }
.btn--solid:hover { filter:brightness(0.93); }
.btn--ghost { border-color:var(--line); color:var(--ink); }
.btn--ghost:hover { border-color:var(--accent); color:var(--accent); }

/* --- promo film ---------------------------------------------------------- */
/* The 25-second film lives in the hero. On a phone it sits under the headline as a
   preview - small enough that the words stay the first thing you read - with a
   Full screen button for watching it properly. On a wide screen it sits beside the
   words. It starts as the page opens - with sound where the browser allows it,
   silently otherwise with a button to turn sound on (promo.js). */
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"title" "film" "lead" "cta"; }
.hero h1 { grid-area:title; }
.hero p.lead { grid-area:lead; }
.hero .cta { grid-area:cta; }
.film {
  grid-area:film; position:relative; margin-top:1.4rem; aspect-ratio:16 / 9;
  width:min(100%, 17.5rem); justify-self:start; container:film / inline-size;
  border-radius:12px; overflow:hidden; background:#141118; border:1px solid var(--line);
}
.film video { display:block; width:100%; height:100%; object-fit:contain; background:#141118; }
/* Dark buttons rather than accent ones: they sit over moving pictures, and white on
   the dark theme's accent would be too faint to read. Sized for the small phone
   film first; a wider film gets larger ones. */
.film__sound, .film__full {
  position:absolute; top:0.5rem;
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  min-height:2.25rem; font:inherit; font-size:0.8rem; font-weight:600; line-height:1; color:#FFFFFF;
  background:rgba(20,17,24,0.8); border:1px solid rgba(255,255,255,0.18); border-radius:999px;
  cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,0.3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.film__sound { left:0.5rem; padding:0.45rem 0.8rem 0.45rem 0.6rem; }
.film__full { right:0.5rem; width:2.25rem; padding:0; }
/* display:inline-flex above would otherwise beat the browser's own [hidden] rule. */
.film__sound[hidden], .film__full[hidden] { display:none; }
.film__sound:hover, .film__full:hover { background:rgba(20,17,24,0.92); border-color:var(--accent); }
.film button:focus-visible { border-radius:999px; }
.film__sound svg { width:1rem; height:1rem; flex:none; color:var(--accent); }
.film__full svg { width:1.05rem; height:1.05rem; flex:none; }
@container film (min-width:24rem) {
  .film__sound, .film__full { top:0.8rem; min-height:2.6rem; font-size:0.93rem; }
  .film__sound { left:0.8rem; padding:0.62rem 1.05rem 0.62rem 0.8rem; gap:0.5rem; }
  .film__full { right:0.8rem; width:2.6rem; }
  .film__sound svg { width:1.15rem; height:1.15rem; }
  .film__full svg { width:1.2rem; height:1.2rem; }
}
/* Tablets, and phones turned sideways: a bigger film, but never so tall that it
   fills the screen. */
@media (min-width:40rem) {
  .film {
    margin-top:1.75rem; border-radius:14px;
    width:min(100%, 36rem, calc(60vh * 16 / 9));
    width:min(100%, 36rem, calc(60svh * 16 / 9));
  }
}
@media (min-width:60rem) {
  .hero .wrap {
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:clamp(2rem,4vw,3.5rem);
    grid-template-rows:auto auto 1fr; grid-template-areas:"title film" "lead film" "cta film";
  }
  .film { margin-top:0; align-self:center; justify-self:stretch; width:auto; }
}

.idea { padding:clamp(2.5rem,6vw,4rem) 0; border-top:1px solid var(--line); }
.idea p { color:var(--muted); margin-top:1.1rem; }
figure { margin:2.5rem 0 0; }
figure svg { width:100%; height:auto; display:block; max-width:44rem; }
figcaption { font-size:0.86rem; color:var(--muted); margin-top:0.9rem; max-width:34em; }

.features { padding:clamp(2.5rem,6vw,4rem) 0; border-top:1px solid var(--line); }
.grid { display:grid; gap:1.6rem 2.5rem; margin-top:2.25rem;
        grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr)); }
.grid p { color:var(--muted); font-size:0.96rem; margin-top:0.4rem; }
.grid h3::before {
  content:""; display:block; width:1.75rem; height:3px; border-radius:2px;
  background:var(--accent); margin-bottom:0.85rem;
}

.pricing { padding:clamp(2.5rem,6vw,4rem) 0; border-top:1px solid var(--line); }
.card {
  margin-top:2rem; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:clamp(1.75rem,4vw,2.5rem); max-width:32rem;
}
.price { display:flex; align-items:baseline; gap:0.4rem; flex-wrap:wrap; }
.price b { font-size:clamp(2.6rem,6vw,3.4rem); font-weight:700; letter-spacing:-0.03em; }
.price span { color:var(--muted); font-size:1rem; }
.card ul { list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:0.6rem; }
.card li { position:relative; padding-left:1.6rem; color:var(--muted); font-size:0.97rem; }
.card li::before {
  content:""; position:absolute; left:0; top:0.6em; width:0.5rem; height:0.5rem;
  border-radius:50%; background:var(--accent);
}
.card .btn { margin-top:1.85rem; }

.contact { padding:clamp(2.5rem,6vw,4rem) 0; border-top:1px solid var(--line); }
.contact p { color:var(--muted); margin-top:1rem; }
.contact a.big { font-size:clamp(1.15rem,2.6vw,1.5rem); font-weight:600; text-decoration:none; }
.contact a.big:hover { text-decoration:underline; }

/* --- legal documents ----------------------------------------------------- */
.doc { padding:clamp(2.5rem,7vw,4.5rem) 0 clamp(3rem,7vw,5rem); }
.doc-head { max-width:40em; }
.doc-head h1 { font-size:clamp(1.9rem,4.5vw,2.9rem); }
.doc-head .updated { color:var(--muted); font-size:0.9rem; margin-top:0.9rem; }
.doc-head .summary { color:var(--muted); margin-top:1.4rem; font-size:1.03rem; }

.doc-body { max-width:40em; margin-top:1rem; }
.doc-body section { padding-top:2.6rem; }
.doc-body h2 {
  font-size:1.28rem; font-weight:650; letter-spacing:-0.015em;
  padding-bottom:0.55rem; border-bottom:1px solid var(--line);
}
.doc-body h2 .n { color:var(--accent); font-variant-numeric:tabular-nums; margin-right:0.6rem; }
.doc-body h3 { margin-top:1.7rem; }
.doc-body p { margin-top:1rem; color:var(--ink); }
.doc-body p.q { color:var(--muted); }
.doc-body ul { margin:1rem 0 0; padding-left:1.15rem; }
.doc-body li { margin-top:0.5rem; color:var(--muted); }
.doc-body li strong, .doc-body p strong { color:var(--ink); font-weight:650; }
.doc-body dl { margin:1.1rem 0 0; display:grid; gap:0.75rem 1.5rem; }
@media (min-width:34rem) { .doc-body dl { grid-template-columns:11rem 1fr; } }
.doc-body dt { font-weight:650; font-size:0.95rem; }
.doc-body dd { margin:0; color:var(--muted); font-size:0.96rem; }

.note {
  margin-top:1.5rem; background:var(--note); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:1.1rem 1.3rem;
}
.note p { margin-top:0; color:var(--ink); font-size:0.96rem; }
.note p + p { margin-top:0.8rem; }
.note strong { font-weight:650; }

.toc { margin-top:2.5rem; padding:1.4rem 1.6rem; background:var(--surface);
       border:1px solid var(--line); border-radius:12px; max-width:40em; }
.toc h2 { font-size:0.8rem; text-transform:uppercase; letter-spacing:0.09em;
          color:var(--muted); font-weight:650; border:0; padding:0; margin-bottom:0.85rem; }
.toc ol { margin:0; padding-left:1.3rem; columns:2; column-gap:2rem; }
@media (max-width:34rem) { .toc ol { columns:1; } }
.toc li { margin-top:0.32rem; font-size:0.94rem; }
.toc a { text-decoration:none; }
.toc a:hover { text-decoration:underline; }

/* --- footer -------------------------------------------------------------- */
footer { border-top:1px solid var(--line); padding:2rem 0 3rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; align-items:center;
               justify-content:space-between; font-size:0.87rem; color:var(--muted); }
footer nav { display:flex; flex-wrap:wrap; gap:0.6rem 1.35rem; }
footer a { color:var(--muted); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* --- sign in ------------------------------------------------------------- */
/* The apex cannot know which salon you are, because every salon is its own
   subdomain. This page asks, then sends you there. It exists because the header
   button used to point at admin.amvela.app - the operator console - which no
   salon account can ever open. */
.signin-page { padding:clamp(3rem,8vw,5.5rem) 0 clamp(3rem,7vw,5rem); }
.signin-card {
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.6rem,4vw,2.5rem); max-width:30rem;
}
.signin-card h1 { font-size:clamp(1.5rem,3.4vw,1.9rem); margin:0; letter-spacing:-0.01em; }
.signin-card p.lead { color:var(--muted); margin:0.75rem 0 1.75rem; font-size:1rem; }
.signin-card label { display:block; font-weight:600; font-size:0.92rem; margin-bottom:0.45rem; }
.slug-field {
  display:flex; align-items:stretch; border:1px solid var(--line);
  border-radius:10px; background:var(--paper); overflow:hidden;
}
.slug-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--note); }
.slug-field input {
  flex:1 1 auto; min-width:0; border:0; background:transparent; color:var(--ink);
  font:inherit; font-size:1.02rem; padding:0.7rem 0.85rem;
}
.slug-field input:focus { outline:none; }
.slug-field .suffix {
  display:flex; align-items:center; padding:0 0.85rem; white-space:nowrap;
  color:var(--muted); font-size:0.95rem; border-left:1px solid var(--line);
  background:var(--surface);
}
.signin-card .err { color:var(--link); font-size:0.92rem; margin:0.65rem 0 0; }
.signin-card button { margin-top:1.25rem; cursor:pointer; font-family:inherit; }
.signin-card p.help { color:var(--muted); font-size:0.9rem; margin:1.5rem 0 0; line-height:1.55; }
.operator { color:var(--muted); font-size:0.87rem; margin:1.75rem 0 0; max-width:30rem; }