/* Kazi, explained: one column read on a phone, with a thread (tour.js) that runs down the left and loops between the parts. */
:root {
  --blue: #5EBDED;
  --orange: #FE7116;
  --cream: #FFF2E8;
  --ink: #171717;
  --deep: #287DA8;
  --panel: #F7F3EE;
  --line: #E6DED5;
  --muted: #5d5a57;
  --text: #34312e;
  /* where the thread runs, and how far the words keep from it */
  --rail: 15px;
  --inset: 40px;
  --edge: 18px;
  --col: 640px;
  --r: 22px;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mark { width: 1.05em; height: 1.1em; fill: currentColor; }

/* top bar: home, which part you are in, language; the line under it fills as you read */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 var(--edge) 0 16px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.brand { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 18px; text-decoration: none; }
.count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.lang { border: 1.5px solid var(--ink); background: transparent; border-radius: 999px; padding: 3px 14px; font-size: 13px; font-weight: 500; cursor: pointer; }
.count:empty + .lang { margin-left: auto; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.progress i { display: block; height: 100%; width: 0; background: var(--deep); }

/* the story and its thread */
.story { position: relative; padding-bottom: 72px; }
.thread { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.thread path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.track { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 1 7; }
.ink { stroke: var(--deep); stroke-width: 2; }
.tip { fill: var(--orange); }
.halo { fill: var(--orange); opacity: .16; transform-box: fill-box; transform-origin: center; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.5); opacity: .06; } }
.node { fill: #fff; stroke: var(--line); stroke-width: 1.5; transition: fill .35s ease, stroke .35s ease; }
.node-num { font: 600 9.5px var(--font); fill: var(--muted); text-anchor: middle; dominant-baseline: central; transition: fill .35s ease; }
.node.on { fill: var(--deep); stroke: var(--deep); }
.node.on + .node-num { fill: #fff; }
.node-step.on { fill: var(--orange); stroke: var(--orange); }
.node-end { stroke-width: 2; }
.node-end.on { fill: var(--orange); stroke: var(--orange); }

/* parts */
.cover, .chapter { position: relative; z-index: 1; width: 100%; max-width: calc(var(--col) + var(--inset) + var(--edge)); margin: 0 auto; }
.cover { min-height: calc(100svh - 56px); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 16px var(--edge) 32px; }
.chapter { padding: 0 var(--edge) 0 var(--inset); margin-top: 170px; display: grid; gap: 18px; }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--deep); min-height: 24px; display: flex; align-items: center; }
h1 { font-size: clamp(31px, 8.4vw, 50px); line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: clamp(27px, 7.4vw, 40px); line-height: 1.14; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; }
.chapter > p, .lead { color: var(--text); }
.lead { font-size: 17px; max-width: 34em; }
.end { font-size: 19px; line-height: 1.45; font-weight: 500; color: var(--ink) !important; padding-top: 4px; }

/* the illustrations: framed, never decoration for its own sake */
.art { border-radius: var(--r); overflow: hidden; background: var(--panel); }
.art img { width: 100%; height: auto; }
.art-cover { width: min(100%, calc(34svh * 1.196)); align-self: center; margin-bottom: 8px; }
.cue { margin-top: 18px; align-self: center; display: grid; justify-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cue::after { content: ''; width: 1.5px; height: 26px; background: linear-gradient(var(--deep), transparent); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* 1 */
.pains { display: grid; gap: 12px; }
.pains li { position: relative; padding: 14px 16px 14px 18px; background: var(--panel); border-radius: 16px; color: var(--text); font-size: 16px; line-height: 1.5; }
.pains li::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--orange); }

/* 2 */
.team { display: grid; gap: 10px; }
.team li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 18px; }
.team strong { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; }
.team small { color: var(--muted); font-size: 14px; }
.face { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 18px; }
.f-mich { background: var(--orange); color: #fff; }
.f-kara { background: var(--blue); color: var(--ink); }
.f-chiara { background: var(--deep); color: #fff; }

/* 3 */
.brandcard { background: var(--panel); border-radius: var(--r); padding: 18px; display: grid; gap: 16px; }
.label { font-size: 12px; color: var(--muted); letter-spacing: .03em; }
.bc-head { display: flex; align-items: center; gap: 14px; }
.bc-head strong { display: block; font-size: 19px; line-height: 1.2; }
.bc-head em { color: var(--muted); font-size: 15px; }
.bc-logo { flex: none; width: 54px; height: 54px; border-radius: 16px; background: #C4512D; color: #FFF2E8; display: grid; place-items: center; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; letter-spacing: .02em; }
.bc-logo.small { width: 38px; height: 38px; border-radius: 12px; font-size: 15px; }
.swatches { display: flex; gap: 10px; }
.swatches i { width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* 4 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); }

/* 5 */
.chat { background: var(--panel); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.chat-head strong { display: block; font-size: 15px; line-height: 1.2; }
.chat-head small { color: var(--muted); font-size: 12px; }
.msg, .typing { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; }
.them { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; }
.us { align-self: flex-end; background: var(--cream); border-bottom-right-radius: 5px; }
.typing { display: flex; gap: 4px; align-self: flex-start; background: #fff; padding: 14px 16px; }
.typing.right { align-self: flex-end; background: var(--cream); }
.typing[hidden] { display: none; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .4; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 40% { opacity: 1; transform: translateY(-2px); } }
.checks { display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: var(--text); font-size: 16px; line-height: 1.5; }
.checks li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 16px; height: 9px; border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); transform: rotate(-45deg); transform-origin: center; }

/* 6 */
.asks { display: grid; gap: 8px; justify-items: end; }
.asks p { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 18px 18px 5px 18px; font-size: 15px; line-height: 1.45; max-width: 88%; }

/* 7 */
.steps { display: grid; gap: 26px; padding-top: 6px; }
.steps h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.steps p { color: var(--text); font-size: 16px; margin-top: 4px; line-height: 1.5; }

/* 8 */
.costs { display: grid; border-top: 1.5px solid var(--line); }
.costs li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1.5px solid var(--line); font-size: 16px; line-height: 1.4; color: var(--text); }
.costs b { white-space: nowrap; font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.costs small { font-size: 13px; font-weight: 500; color: var(--muted); }
.gift { background: var(--cream); border-radius: 16px; padding: 14px 16px; color: var(--ink) !important; font-weight: 500; }

/* the question */
.final { padding: 0 var(--edge); text-align: center; justify-items: center; gap: 20px; }
.final-node { display: block; height: 26px; }
.final h2 { font-size: clamp(24px, 6.6vw, 34px); line-height: 1.22; max-width: 18em; }
.final .art { width: 100%; }
.answer { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; border-radius: 999px; font-size: 17px; font-weight: 600; letter-spacing: .06em; text-decoration: none; cursor: pointer; border: 2px solid var(--ink); transition: transform .15s ease, background .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.yes { background: var(--ink); color: #fff; }
.no { background: #fff; color: var(--ink); }
.no[aria-pressed="true"] { background: var(--panel); border-color: var(--line); color: var(--muted); }
.btn:focus-visible, .lang:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.hint { font-size: 13px; color: var(--muted); max-width: 26em; }
.thanks { min-height: 1.6em; font-weight: 500; }

.foot { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 28px var(--edge) calc(28px + env(safe-area-inset-bottom)); background: var(--ink); color: #d6d3cf; font-size: 14px; }
.foot a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.foot a:first-child { color: #fff; font-weight: 600; }

/* things appear as the reader reaches them (only when the script runs) */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .art[data-reveal] { transform: none; clip-path: inset(18% 0 0 0 round var(--r)); transition: opacity .6s ease, clip-path 1s cubic-bezier(.2, .7, .2, 1); }
.js .art[data-reveal].in { clip-path: inset(0 0 0 0 round var(--r)); }
.js .art[data-reveal] img { transform: scale(1.05); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.js .art[data-reveal].in img { transform: none; }
.js [data-reveal] > [style*="--i"], .js .swatches i { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i) * 110ms + 150ms); }
.js [data-reveal].in > [style*="--i"], .js .in .swatches i { opacity: 1; transform: none; }
.js .swatches i { transform: scale(.4); transition-delay: calc(var(--i) * 120ms + 350ms); }
.js .chat .msg { display: none; }
.js .chat .msg.shown { display: block; animation: pop .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* wider screens: the same single column, centred */
@media (min-width: 720px) {
  :root { --inset: 56px; --rail: 20px; }
  .chapter { margin-top: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js [data-reveal] > [style*="--i"], .js .swatches i { opacity: 1; transform: none; clip-path: none; }
  .js .art[data-reveal] img { transform: none; }
  .js .chat .msg { display: block; }
}