/* Brocha legal + help pages. Same look as the booking page ("B · Soft"). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/jakarta-v1.woff2) format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/jakarta-italic-v1.woff2) format('woff2');
}
:root {
  --bg: #fbf7f4;
  --surface: #ffffff;
  --surface2: #f3ece8;
  --ink: #2b2220;
  --ink2: #5a4d49;
  --muted: #8a7c77;
  --line: #efe6e1;
  --accent: #c4787a;
  --accent-soft: #f6e3e1;
  --accent-ink: #9a5457;
  --peach: #f4d9c6;
  --shadow: 0 10px 30px rgba(138, 106, 96, 0.1);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(154, 84, 87, 0.35); transition: text-decoration-color 0.2s; }
a:hover { text-decoration-color: currentColor; }
b { font-weight: 700; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* reading progress (scroll-driven where supported) */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; background: linear-gradient(90deg, var(--accent), #e2a07f); transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { to { transform: scaleX(1); } }
}

/* header */
.lhead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px max(20px, calc((100vw - 1120px) / 2));
  background: rgba(251, 247, 244, 0.82);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, box-shadow 0.3s;
}
.lhead.scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(138, 106, 96, 0.06); }
.brand { font-weight: 800; font-size: 23px; letter-spacing: -0.9px; color: var(--accent); text-decoration: none; }
.swap { font-size: 13px; font-weight: 600; color: var(--ink2); text-decoration: none; padding: 7px 14px; border-radius: 999px; background: var(--surface2); transition: background 0.2s, color 0.2s; }
.swap:hover { background: var(--accent-soft); color: var(--accent-ink); }
.swaps { display: flex; gap: 6px; }

/* hero */
.hero { position: relative; max-width: 1120px; margin: 0 auto; padding: 72px 20px 30px; isolation: isolate; }
.blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none; }
.b1 { width: 420px; height: 420px; top: -120px; right: -80px; background: radial-gradient(circle at 30% 30%, #f1c9c3, transparent 70%); animation: drift 16s ease-in-out infinite alternate; }
.b2 { width: 320px; height: 320px; top: 60px; right: 240px; background: radial-gradient(circle at 50% 50%, var(--peach), transparent 70%); animation: drift 20s ease-in-out -6s infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.15); } }
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px;
  animation: rise 0.8s var(--ease) both;
}
h1 { margin-top: 18px; font-size: clamp(38px, 7.2vw, 72px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; max-width: 14ch; }
h1 .w { display: inline-block; animation: rise 0.9s var(--ease) both; animation-delay: calc(0.08s + var(--i) * 0.07s); }
.meta, .lead { margin-top: 18px; color: var(--muted); font-size: 15px; animation: rise 0.9s var(--ease) 0.35s both; }
.lead { font-size: 18px; color: var(--ink2); max-width: 46ch; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* "in short" card */
.short {
  margin-top: 34px; max-width: 760px; background: var(--surface); border-radius: 24px; padding: 26px 28px; box-shadow: var(--shadow);
  border: 1px solid var(--line); animation: rise 1s var(--ease) 0.45s both;
}
.short h2 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.short ul { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.short li { position: relative; padding-left: 32px; color: var(--ink2); }
.short li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft);
}
.short li::after { content: ''; position: absolute; left: 7px; top: 8px; width: 5px; height: 9px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* layout + table of contents */
.layout { max-width: 1120px; margin: 0 auto; padding: 30px 20px 40px; display: grid; grid-template-columns: 1fr; gap: 40px; }
.toc { display: none; }
.toc-m { max-width: 1120px; margin: 8px auto 0; padding: 0 20px; }
.toc-m summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; justify-content: space-between; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary::after { content: '+'; color: var(--accent); font-size: 18px; line-height: 1; transition: transform 0.3s var(--ease); }
.toc-m[open] summary::after { transform: rotate(45deg); }
.toc-m ol, .toc ol { list-style: none; }
.toc-m ol { padding: 8px 6px; }
.toc a, .toc-m a { display: flex; gap: 12px; padding: 7px 12px; border-radius: 10px; color: var(--ink2); text-decoration: none; font-size: 14px; line-height: 1.4; transition: background 0.2s, color 0.2s; }
.toc a span, .toc-m a span { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 1px; }
.toc a:hover, .toc-m a:hover { background: var(--surface2); color: var(--ink); }
.toc a.on { background: var(--accent-soft); color: var(--accent-ink); }
.toc a.on span { color: var(--accent-ink); }
@media (min-width: 920px) {
  .layout { grid-template-columns: 250px 1fr; gap: 64px; }
  .toc { display: block; position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; }
  .toc p { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 12px 8px; }
  .toc-m { display: none; }
}

/* document */
.doc { max-width: 700px; }
.doc section { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.doc section:first-child { border-top: 0; padding-top: 4px; }
.doc h2 { font-size: clamp(22px, 3vw, 27px); letter-spacing: -0.02em; line-height: 1.2; display: flex; align-items: baseline; gap: 14px; }
.doc h2 .n { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.doc h3 { font-size: 17px; margin: 22px 0 6px; }
.doc p { margin-top: 12px; color: var(--ink2); }
.doc ul, .doc ol { margin-top: 12px; padding-left: 0; color: var(--ink2); display: grid; gap: 8px; }
.doc ul { list-style: none; }
.doc ul > li { position: relative; padding-left: 22px; }
.doc ul > li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
.doc ul ul { margin-top: 8px; }
.doc ul ul > li::before { background: transparent; border: 1.5px solid var(--accent); width: 6px; height: 6px; }
.doc ol { list-style: none; counter-reset: n; }
.doc ol > li { counter-increment: n; position: relative; padding-left: 34px; }
.doc ol > li::before { content: counter(n); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface2); color: var(--ink2); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.doc.solo { margin: 0 auto; padding: 10px 20px 60px; max-width: 1120px; }
.doc.solo section { max-width: 740px; }
.totop { margin-top: 30px; font-size: 14px; }
.totop a { color: var(--muted); text-decoration: none; }

/* scroll reveal (CSS only where supported, so nothing ever hides without JS) */
@supports (animation-timeline: view()) {
  .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes rv { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}

/* help page */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; animation: rise 0.9s var(--ease) 0.45s both; }
.chips a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink2); background: var(--surface); border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; transition: all 0.2s; }
.chips a:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-1px); }
.contact {
  position: relative; overflow: hidden; max-width: 1080px; margin: 24px 20px 10px; padding: 34px 30px; border-radius: 28px;
  background: linear-gradient(135deg, #a8585b 0%, #b8665f 55%, #c57862 100%); color: #fff; display: grid; gap: 20px; align-items: center;
  box-shadow: 0 20px 50px rgba(196, 120, 122, 0.28);
}
@media (min-width: 1120px) { .contact { margin: 24px auto 10px; } }
.contact::after { content: ''; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); animation: drift 14s ease-in-out infinite alternate; }
.contact h2 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.02em; }
.contact p { margin-top: 8px; max-width: 52ch; }
.contact .addr { font-size: 13px; opacity: 0.9; margin: 0; }
.btn {
  position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 26px; border-radius: 999px;
  background: #fff; color: var(--accent-ink); font-weight: 700; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s;
  box-shadow: 0 8px 24px rgba(90, 40, 40, 0.18);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(90, 40, 40, 0.24); }
@media (min-width: 760px) {
  .contact { grid-template-columns: 1fr auto; padding: 40px 44px; }
  .contact .addr { grid-column: 1 / -1; }
}
.faqg { max-width: 1080px; margin: 0 20px; padding: 44px 0 6px; scroll-margin-top: 80px; }
@media (min-width: 1120px) { .faqg { margin: 0 auto; } }
.faqg h2 { font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.02em; margin-bottom: 14px; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; margin-top: 10px; transition: box-shadow 0.3s, border-color 0.3s; }
.qa[open] { box-shadow: var(--shadow); border-color: transparent; }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); transition: background 0.3s, transform 0.4s var(--ease); }
.qa i::before, .qa i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; background: var(--ink2); border-radius: 2px; transition: transform 0.4s var(--ease), background 0.3s; }
.qa i::after { transform: rotate(90deg); }
.qa[open] i { background: var(--accent-soft); transform: rotate(180deg); }
.qa[open] i::after { transform: rotate(0); }
.qa[open] i::before, .qa[open] i::after { background: var(--accent-ink); }
.qa .a { padding: 0 22px 20px; color: var(--ink2); }
.qa[open] .a { animation: open 0.45s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* steps page */
.ways { max-width: 1080px; margin: 10px 20px 0; display: grid; gap: 16px; }
@media (min-width: 1120px) { .ways { margin: 10px auto 0; } }
@media (min-width: 760px) { .ways { grid-template-columns: 1fr 1fr; } }
.way { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 28px; box-shadow: var(--shadow); }
.way .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.way h2 { font-size: 24px; letter-spacing: -0.02em; margin-top: 4px; }
.steps { list-style: none; counter-reset: s; margin-top: 18px; display: grid; gap: 14px; }
.steps li { counter-increment: s; position: relative; padding-left: 46px; color: var(--ink2); min-height: 32px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 34px; bottom: -14px; width: 2px; background: var(--accent-soft); }
.k-steps .doc.solo { margin-top: 30px; }

/* footer */
.lfoot { margin-top: 50px; border-top: 1px solid var(--line); background: var(--surface2); }
.lfoot .in { max-width: 1120px; margin: 0 auto; padding: 36px 20px 44px; display: grid; gap: 12px; }
.lfoot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.lfoot nav a, .lfoot p a { color: var(--ink2); text-decoration: none; font-size: 14px; font-weight: 600; }
.lfoot nav a:hover, .lfoot p a:hover { color: var(--accent-ink); }
.lfoot .fine { font-size: 12.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .lhead, .progress, .toc, .toc-m, .blob, .lfoot nav, .totop { display: none !important; }
  body { background: #fff; font-size: 12pt; }
}