/* chivutim.com · Ripples design (ruled 2026-09-30). Night rising into light.
   Accent = powder pink. Deep rose for text on cream. Brick lives only in the dawn gradients. */
:root{
  color-scheme:light;
  --night:#0c0a09;--ox:#2b1210;--ox2:#7d2620;--brick:#a8352f;--dawn:#e2a497;
  --cream:#f7f6f3;--inkc:#1a1411;--softc:#6b6560;--hair:#e4e0da;
  --acc:#e0aebd;--on:#1a1411;--glow:var(--acc);--rose:#9a4e68;--blush:#f1e2e6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* no Android tap flash: the whole page listens for taps (stones), so the browser would tint the full screen */
html{scroll-behavior:smooth;scroll-padding-top:70px;background:var(--night);-webkit-tap-highlight-color:transparent}
/* our own quiet press feedback instead */
.m .btn:active,.m .pill:active,.mH .type:active,.mH .more:active{opacity:.72}
body{margin:0;background:var(--night)}
/* language switching */
body:not(.is-en) .en-block{display:none!important}
body.is-en .he-block{display:none!important}

.m{direction:rtl;text-align:center;font-family:"Assistant","Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:1.78;font-weight:300;background:var(--night);color:var(--cream);position:relative;isolation:isolate;min-height:100vh}
body.is-en .m{direction:ltr}
@media (hover:none){.mH{cursor:pointer}}
.m p{margin:0 0 18px}
.m p:last-child{margin-bottom:0}
.m b{font-weight:600}
.m h1,.m h2,.m h3{font-family:"Rubik","Assistant",sans-serif;margin:0;text-wrap:balance}
.m h2{font-weight:900;font-size:32px;line-height:1.1;margin-bottom:20px}
.m h3{font-weight:700;font-size:22px;line-height:1.25;margin:28px 0 10px}
.m .btn{display:block;text-align:center;font-family:"Assistant",Arial,sans-serif;font-weight:700;font-size:19px;text-decoration:none;padding:12px 18px;border-radius:999px;background:var(--acc);color:var(--on)}
.m .btn.q{background:none;border:2px solid var(--rose);color:var(--rose)}
.m .btn:focus-visible{outline:2px solid var(--inkc);outline-offset:3px}
.m .col{max-width:560px;margin-inline:auto;position:relative;z-index:1}
.m .bal{text-wrap:balance}
.m canvas.fx{position:sticky;top:0;display:block;width:100%;height:var(--h,100vh);margin-bottom:calc(-1 * var(--h,100vh));z-index:0;pointer-events:none}
.m .light{background:var(--cream);color:var(--inkc)}
.m section{padding:48px 24px}
.m .hairline{height:1px;background:linear-gradient(90deg,transparent 24px,var(--hair) 24px,var(--hair) calc(100% - 24px),transparent calc(100% - 24px)),var(--cream)}
.m .ask{font-family:"Rubik","Assistant",sans-serif;font-weight:800;font-size:28px;line-height:1.2;color:var(--rose);margin:0 auto 24px;text-wrap:balance;max-width:14em}
.m .ask::before{content:"";display:block;width:44px;height:44px;margin:0 auto 18px;border-radius:50%;border:1.5px solid rgba(154,78,104,.55);box-shadow:0 0 0 9px rgba(224,174,189,.28),0 0 0 19px rgba(224,174,189,.14)}
.m footer{color:var(--softc);font-size:13px;line-height:1.5;padding:22px 24px 44px;border-top:1px solid var(--hair)}
.m footer .door{font-size:16px;font-weight:400;color:var(--inkc);line-height:1.55;margin:0 auto 12px;text-wrap:balance}
.m footer .who{margin:0}
/* sticky header */
.m .bar{position:sticky;top:0;z-index:8;height:60px;margin-bottom:-60px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;color:var(--cream);transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.m .bar.dim{background:rgba(12,10,9,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.m .bar.lit{background:rgba(247,246,243,.9);color:var(--inkc);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--hair)}
.m .pill{display:inline-flex;align-items:center;gap:8px;height:36px;font-family:"Assistant",Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.02em;color:inherit;background:none;border:1px solid rgba(247,246,243,.35);border-radius:999px;padding:0 14px;text-decoration:none;cursor:pointer}
.m .bar.lit .pill{border-color:rgba(26,20,17,.22)}
.m .pill.lang{font-weight:400;opacity:.85}
.m .pill.round{width:36px;padding:0;justify-content:center}
.m .pill svg{width:18px;height:18px;flex:none}
.m .pill:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.m .back .arr{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-inline-start:-8px;border-radius:50%;background:var(--glow);color:var(--on)}
.m .back .arr svg{width:14px;height:14px}
body.is-en .m .back .arr svg{transform:scaleX(-1)}

/* ============ home ============ */
.mH .hero{position:relative;height:510px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 20px 14px}
.mH .portrait{position:absolute;top:92px;left:50%;width:150px;height:150px;margin-left:-75px;border-radius:50%;overflow:hidden;animation:beat 4s ease-in-out infinite}
.mH .portrait img{display:block;width:100%;height:100%;object-fit:cover}
/* one pulse = 400 ms, every 4 s */
@keyframes beat{0%,10%,100%{transform:scale(1)}3%{transform:scale(1.02)}5%{transform:scale(1.004)}8%{transform:scale(1.013)}}
.mH .hero h1,.mH .hero p,.mH .hero .tap{position:relative}
.mH .hero h1{font-weight:900;font-size:54px;line-height:.95;letter-spacing:-.01em;margin-bottom:4px}
body.is-en .mH .hero h1{font-size:46px}
.mH .hero .role{font-family:"Rubik","Assistant",sans-serif;font-weight:500;font-size:19px;line-height:1.4;color:var(--glow);margin:0 0 8px}
.mH .tap{display:inline-flex;align-items:center;gap:10px;font-family:"Rubik","Assistant",sans-serif;font-weight:500;font-size:15px;line-height:1.4;color:var(--cream);border:1px solid rgba(247,246,243,.45);border-radius:999px;padding:5px 16px 5px 11px;transition:opacity .6s ease,transform .6s ease}
.mH .tap svg{width:18px;height:18px;flex:none;color:var(--glow)}
.mH .tap.gone{opacity:0;transform:translateY(6px);pointer-events:none}
.mH .hook{padding:12px 24px 58px;font-size:20px}
.mH .hook p{opacity:.9}
.mH .hook .big{font-family:"Rubik","Assistant",sans-serif;font-weight:900;font-size:44px;line-height:1;opacity:1;margin:22px 0 0}
/* the chivutim section is the dawn: it starts in the night and ends on cream */
.mH .dawn-a{background:linear-gradient(180deg,var(--night),var(--ox));padding:30px 24px 22px}
.mH .dawn-a h2{color:var(--glow);font-size:64px;line-height:.95;margin-bottom:24px;letter-spacing:-.01em}
.mH .dawn-a h2 .h2-sub{display:block;font-size:20px;font-weight:500;line-height:1.3;letter-spacing:0;margin-top:10px}
.mH .dawn-b{background:linear-gradient(180deg,var(--ox) 0,var(--ox2) 40%,rgb(168,53,47) calc(100% - 90px),rgb(169,55,49) calc(100% - 75px),rgb(173,62,55) calc(100% - 60px),rgb(178,72,64) calc(100% - 45px),rgb(184,85,77) calc(100% - 30px),rgb(192,100,91) calc(100% - 15px),rgb(201,117,107) 100%);padding:22px 24px 30px}
.mH .dawn-b h3{color:var(--cream)}
.mH .turn{height:50px;background:linear-gradient(180deg,rgb(201,117,107) 0px,rgb(208,129,118) 10px,rgb(214,141,130) 20px,rgb(221,154,142) 30px,rgb(227,166,154) 40px,rgb(229,177,166) 50px)}
.mH .dawn-c{background:linear-gradient(180deg,rgb(229,177,166) 0px,rgb(235,199,190) 20px,rgb(240,218,211) 40px,rgb(244,233,228) 60px,rgb(246,242,239) 80px,rgb(247,246,243) 100px,var(--cream) 100px);color:var(--inkc);padding:4px 24px 10px}
.mH .dawn-c .loud{font-family:"Rubik","Assistant",sans-serif;font-weight:500;font-size:23px;line-height:1.5;text-wrap:balance}
.mH .facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:26px -14px 24px}
.mH .fact{white-space:nowrap;font-size:13.5px;font-weight:400;line-height:1.6;color:var(--inkc);background:color-mix(in srgb,var(--acc) 26%,var(--cream));border-radius:999px;padding:4px 11px}
.mH .dawn-d{padding:40px 24px 48px}
.mH .types-title{font-family:"Rubik","Assistant",sans-serif;font-weight:700;font-size:22px;line-height:1.3;color:var(--inkc);margin:0 0 22px}
.mH .types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 8px;margin:8px 0 22px}
.mH .type{font-size:14px;font-weight:600;line-height:1.25;color:var(--inkc);text-decoration:none}
.mH .type img{display:block;width:88px;height:88px;border-radius:50%;margin:0 auto 8px}
.mH .type:focus-visible{outline:2px solid var(--rose);outline-offset:4px;border-radius:8px}
.mH .more{color:var(--rose);text-decoration:none;font-weight:400}
.mH .more:hover{text-decoration:underline}
.mH .lead-btn{margin-top:24px}
.m .emblem{display:block;width:150px;height:150px;border-radius:50%;margin:0 auto 28px;animation:breathe 5s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.045)}}
/* consciousness: each title in a circle that morphs into a rounded rectangle */
.mH .depths{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px;text-align:center}
.mH .depth{width:100%;max-width:112px;min-height:112px;margin:0;padding:0 10px;border-radius:56px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;overflow:hidden;font-size:17px;line-height:1.7;-webkit-tap-highlight-color:transparent}
.mH .depth b{font-family:"Rubik","Assistant",sans-serif;font-weight:700;font-size:18px;line-height:1.15;margin:0;text-align:center}
.mH .depth b::after{content:"+";display:block;font-family:"Assistant",sans-serif;font-weight:300;font-size:20px;line-height:1;margin-top:4px;opacity:.6}
.mH .depth .tx{display:none;opacity:0;transition:opacity .26s ease}
.mH .depth.open{max-width:600px;border-radius:26px;padding:22px 24px}
.mH .depth.open b::after{content:"";display:none}
.mH .depth.open .tx{display:block;margin-top:8px}
.mH .depth.show-text .tx{opacity:1}
.mH .depth:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.mH .depth-1{background:var(--blush);color:var(--inkc)}
.mH .depth-2{background:var(--acc);color:var(--inkc)}
.mH .depth-3{background:var(--night);color:var(--cream)}
.mH .depth-3 b{color:var(--glow)}
/* English words are longer: a bigger circle and slightly smaller type so 'subconscious' fits */
body.is-en .mH .depth:not(.open){max-width:128px;min-height:128px;border-radius:64px}
body.is-en .mH .depth b{font-size:16px}
.mH .price-line{border-inline-start:3px solid var(--acc);padding-inline-start:18px;margin:26px auto;text-align:start;max-width:520px}
.mH .price-line p{margin:0;font-size:21px;font-weight:400}
.mH .cta{padding:44px 24px 44px}
.mH .cta-option{margin-bottom:20px}
.mH .cta .sub{font-size:14px;color:var(--softc);margin:8px 0 0;line-height:1.45}

/* ============ chivutim page: the types ============ */
.mC .hero{position:relative;padding:84px 24px 18px;overflow:hidden;background:var(--night)}
.mC .hero .emblem{width:132px;height:132px;margin:0 auto 26px;position:relative}
.mC .hero h1{position:relative;font-weight:900;font-size:42px;line-height:1.05;letter-spacing:-.01em;color:var(--glow);margin-bottom:12px}
.mC .turn{height:130px;background:linear-gradient(180deg,var(--night) 0%,#1a0d0b 10%,var(--ox) 20%,#55201b 30%,var(--ox2) 40%,#933029 50%,var(--brick) 58%,#bf6a5e 68%,#d58f82 76%,var(--dawn) 83%,#ecc9c0 90%,#f4e7e2 95%,var(--cream) 100%)}
.mC .t2{padding:38px 24px;scroll-margin-top:70px}
.mC .turn + .t2{padding-top:12px}
.mC .t2 img{display:block;width:132px;height:132px;border-radius:50%;margin:0 auto 16px}
.mC .t2 h3{font-weight:800;font-size:28px;color:var(--rose);margin:0 0 12px}
.mC .t2 p{text-wrap:balance}
.mC .t2.slot img{opacity:.55}
.mC .t2.slot h3,.mC .t2.slot p{color:var(--softc)}
.mC .cta{padding:48px 24px 44px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mH .portrait,.m .emblem{animation:none}
  .mH .tap{transition:none}
}

/* lines Dan breaks by hand: balance each line on its own, no lone words */
.m p{text-wrap:pretty}
.m p .ln{display:block;text-wrap:balance}