/* v6: Ori's notes from the screen recording (11.11.2026 night). Loaded last.
   Calmer paper lines, larger type everywhere, no field choice + 8 styles in the brief,
   8 sharks, a journey the shark swims through, reel-shaped videos, a lightbox, founders side by side. */

/* ---- paper: the rulings are barely there ---- */
body{background-image:repeating-linear-gradient(to bottom,transparent 0 41px,rgba(143,179,239,.085) 41px 42px)}

/* ---- base sizes ---- */
.wrap{width:min(1240px,100% - 32px)}
.narrow{width:min(920px,100% - 32px)}
.hand{font-size:clamp(30px,2.7vw,38px)}
.sec-title{font-size:clamp(31px,4.7vw,56px)}
.sec-sub{font-size:clamp(18.5px,1.7vw,23px);max-width:800px;margin-top:16px;text-wrap:balance}
.sub-title{font-size:clamp(26px,3vw,38px);margin-top:64px}
@media (min-width:901px){section{padding:86px 0}}

/* ---- hero ---- */
.hero{padding:44px 0 30px}
.hero .logo{width:clamp(150px,15vw,230px)}
.hero h1{font-size:clamp(39px,6.4vw,74px);margin-top:14px}
.hero .h1b{font-size:clamp(24px,3.6vw,42px);margin-top:16px;text-wrap:balance}
.hero .lead{font-size:clamp(19px,1.9vw,25px);max-width:760px;margin-top:22px;text-wrap:balance}
.hero-cta{margin-top:34px;gap:14px}
.hero-cta .btn{font-size:clamp(19px,1.9vw,25px);padding:20px clamp(22px,3vw,42px)}
.hero-cta .hand{font-size:clamp(31px,3vw,42px)}
@media (min-width:1200px){
  .hero h1{font-size:min(5.2vw,80px);max-width:none}
  .hero h1 .mark{display:block;width:fit-content;margin:6px auto 0}
  .hero .h1b,.hero .lead{max-width:900px}
  .hero .h1b{font-size:min(3vw,46px)}
  /* two result cards beside the headline; the other two join on wide screens */
  .hf1{right:max(18px,calc(50% - 700px))}
  .hf3{left:max(18px,calc(50% - 700px))}
  .hf2,.hf4{display:none}
}
@media (min-width:1560px){
  .hf2,.hf4{display:block}
  .hf2{right:calc(50% - 716px);top:372px}
  .hf4{left:calc(50% - 690px);top:346px}
}

/* ---- demo ---- */
.demo-head{margin-bottom:30px}
.app-top{display:flex;align-items:center;gap:12px;padding:9px 18px;background:var(--sky-soft);border-bottom:1.5px solid #C6D8F6;font-size:16px;color:var(--ink)}
.app-top b{font-family:Rubik,sans-serif;font-weight:800;font-size:15px;background:var(--ink);color:#fff;border-radius:999px;padding:3px 15px;white-space:nowrap}
.app-top .link{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;white-space:nowrap}
.app-top .link svg{width:17px;height:17px}
.demo-after{max-width:860px;margin:30px auto 0;display:grid;gap:22px;justify-items:center;text-align:center}
.demo-after p{background:var(--sky-soft);border-radius:16px;padding:14px 24px;font-size:clamp(17.5px,1.55vw,21px);color:var(--ink);text-wrap:balance}
.demo-after p b{font-family:Rubik,sans-serif;font-weight:800}
.demo-after .btn{font-size:clamp(19px,1.9vw,25px);padding:20px clamp(20px,3vw,40px);text-align:center;text-wrap:balance;line-height:1.25}

/* brief: name, own name, eight styles */
.brief{grid-template-columns:1.4fr .6fr;padding:40px clamp(18px,4.5vw,64px) 60px}
.brief h3{font-size:clamp(31px,4.4vw,56px)}
.brief .q{font-size:clamp(18.5px,1.7vw,23px);margin:12px 0 24px}
.brief .form-row{gap:14px;align-items:flex-start}
.brief .form-row label{font-size:16px;gap:6px}
.brief .field{font-size:19px;padding:15px 16px;border-radius:14px}
.brief .form-row .w2 input{font-size:22px}
.brief .form-row label.bad .field{border-color:var(--error);box-shadow:0 0 0 3px #F8DEDB}
.brief .err{color:var(--error);font-size:15.5px;font-weight:700}
.sty-wrap{margin-top:20px}
.sty-h{font-size:16px}
.sty-grid{grid-template-columns:repeat(4,1fr);gap:16px 14px}
.sty-c{--d:color-mix(in srgb,var(--p) 40%,#0c1014);--l:color-mix(in srgb,var(--p) 8%,#fff);aspect-ratio:16/10}
.sty-l{font-size:16px}
.brief .go{font-size:clamp(22px,2vw,27px);padding:22px clamp(26px,3.4vw,48px);margin-top:28px}
.brief-side .note h5{font-size:21px}
.note .gets li{font-size:clamp(16.5px,1.4vw,18.5px);padding:9px 0}
.gets svg{width:22px;height:22px}
.lmk b{font-family:Rubik,sans-serif;font-weight:900;font-size:.8em;line-height:1}

/* ---- four more looks for the content cards ---- */
.cc.st-nature{--cbg:#f3efe3;--cf:"Varela Round"}
.cc.st-nature::before{width:58cqw;height:58cqw;border-radius:0 100% 0 100%;background:color-mix(in srgb,var(--p) 26%,transparent);top:-12cqw;left:-14cqw;rotate:-8deg}
.cc.st-nature::after{width:34cqw;height:34cqw;border-radius:100% 0 100% 0;background:color-mix(in srgb,var(--a) 45%,transparent);bottom:-8cqw;right:-8cqw;rotate:12deg}
.cc.st-pop{--cbg:var(--p);--cink:#fff;--cf:"Secular One"}
.cc.st-pop::before{width:52cqw;height:52cqw;border-radius:50%;background:var(--a);top:-22cqw;left:-18cqw}
.cc.st-pop::after{width:40cqw;height:40cqw;bottom:-5cqw;left:-5cqw;background:radial-gradient(circle,rgba(255,255,255,.5) 1cqw,transparent 1.2cqw) 0 0/5cqw 5cqw}
.cc.st-pop .tag,.cc.st-pop .pill{background:var(--a);color:var(--d)}
.cc.st-pop .foot .lmk,.cc.st-pop .sty-in .lmk{background:#fff;color:var(--p)}
.cc.st-pop .num,.cc.flyer.st-pop li svg{color:var(--a)}
.cc.flyer.st-pop::before{display:none}
.cc.st-mono{--cbg:#fbfaf7;--cink:#15171a;--cf:Heebo}
.cc.st-mono::before{inset:3.4cqw;border:.5cqw solid #15171a}
.cc.st-mono .big,.cc.st-mono .sty-name{font-weight:900;letter-spacing:-.3px}
.cc.st-mono .tag{background:none;color:#15171a;border:.4cqw solid #15171a}
.cc.st-mono .pill,.cc.st-mono .foot .lmk,.cc.st-mono .sty-in .lmk{background:#15171a;color:#fff}
.cc.st-mono .num,.cc.flyer.st-mono li svg{color:#15171a}
.cc.st-tech{--cbg:#0c1030;--cink:#eaf0ff;--cf:Heebo}
.cc.st-tech::before{inset:0;background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--p) 80%,transparent),transparent 58%),repeating-linear-gradient(0deg,transparent 0 7.6cqw,rgba(255,255,255,.05) 7.6cqw 8cqw),repeating-linear-gradient(90deg,transparent 0 7.6cqw,rgba(255,255,255,.05) 7.6cqw 8cqw)}
.cc.st-tech::after{width:34cqw;height:34cqw;border-radius:50%;background:color-mix(in srgb,var(--a) 50%,transparent);filter:blur(9cqw);bottom:-10cqw;right:-8cqw}
.cc.st-tech .big,.cc.st-tech .sty-name{font-weight:700}
.cc.st-tech .tag{background:none;color:var(--a);border:.35cqw solid var(--a)}
.cc.st-tech .pill,.cc.st-tech .foot .lmk,.cc.st-tech .sty-in .lmk{background:var(--a);color:#0c1030}
.cc.st-tech .num,.cc.flyer.st-tech li svg{color:var(--a)}
.cc.reel.st-tech{background:#0c1030}
.cc.reel.st-tech::before,.cc.reel.st-tech::after{display:block}

/* ---- the sharks: eight, in two rows ---- */
@media (min-width:621px){
  .team{gap:22px;margin-top:46px}
  .team-card{padding:28px 22px 26px;border-radius:22px}
  .team-card .av{width:112px;height:112px;margin-bottom:14px}
  .team-card .av i{width:44px;height:44px}
  .team-card .av i svg{width:23px;height:23px}
  .team-card h3{font-size:clamp(22px,2vw,27px)}
  .team-card .role{font-size:clamp(26px,2.3vw,31px)}
  .team-card p{font-size:clamp(17px,1.45vw,19px)}
}

/* ---- compare ---- */
.compare{gap:clamp(24px,3.2vw,44px);margin-top:52px}
.way{padding:clamp(30px,3.4vw,46px) clamp(24px,3vw,40px) clamp(28px,3vw,42px)}
.way h3{font-size:clamp(26px,2.7vw,37px);margin-bottom:20px}
.way ul{gap:17px}
.way li{font-size:clamp(18px,1.65vw,22.5px);gap:12px}
.way li svg{width:24px;height:24px;margin-top:5px}

/* ---- the journey: the shark swims from chapter to chapter ---- */
.tl-legend{font-size:clamp(15.5px,1.3vw,17.5px);margin-top:20px}
.tl{margin-top:56px;padding-inline-start:74px}
.tl-svg{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;z-index:1}
.tl-bg{fill:none;stroke:#BFD0EE;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 13}
.tl-fg{fill:none;stroke:var(--flag);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.15s cubic-bezier(.55,.05,.25,1)}
.tl-shark{top:0;left:0;right:auto;width:64px;height:64px;translate:none;z-index:4;offset-rotate:0deg;offset-anchor:50% 50%;offset-distance:0px;transition:offset-distance 1.15s cubic-bezier(.55,.05,.25,1)}
.tl-shark img{display:block;width:100%;height:100%;border-radius:50%;animation:tl-bob 3.2s ease-in-out infinite}
.tl-shark.swim img{animation:tl-swim .4s ease-in-out infinite}
@keyframes tl-bob{50%{translate:0 -5px}}
@keyframes tl-swim{0%,100%{rotate:-10deg;translate:-3px 0}50%{rotate:10deg;translate:3px 0}}
.tl-shark i{position:absolute;top:8%;left:50%;width:10px;height:10px;border-radius:50%;border:2px solid var(--sky);background:rgba(255,255,255,.85);opacity:0}
.tl-shark.swim i{animation:tl-bub .9s ease-out infinite}
.tl-shark i:nth-of-type(2){width:7px;height:7px;--bx:-16px;animation-delay:.25s}
.tl-shark i:nth-of-type(3){width:6px;height:6px;--bx:14px;animation-delay:.5s}
@keyframes tl-bub{0%{opacity:0;translate:0 0;scale:.5}25%{opacity:1}100%{opacity:0;translate:var(--bx,4px) -44px;scale:1.25}}
.tl-ch{margin-bottom:22px}
.tl-node{inset-inline-start:-74px;top:22px;width:52px;height:52px;font-size:22px}
.tl-card{padding:22px 26px 20px;border-radius:20px;transition:border-color .3s,box-shadow .3s,translate .3s}
.tl-ch.cur .tl-card{border-color:var(--ink);box-shadow:6px 6px 0 var(--sky)}
.tl-top h3{font-size:clamp(22px,2.3vw,30px)}
.tl-top .fr{font-size:15px;padding:2px 13px}
.tl-card>p{font-size:clamp(17px,1.5vw,19.5px);margin-top:6px}
.tl-steps{gap:9px;margin-top:14px}
.tl-steps .pill{font-size:clamp(15px,1.3vw,17.5px);padding:7px 16px 7px 14px}
.tl-steps a.pill svg{width:17px;height:17px}
@media (min-width:900px){
  .tl{padding-inline-start:0;max-width:1180px;margin-inline:auto}
  .tl-ch{width:calc(50% - 110px);margin-bottom:-30px}
  .tl-ch:last-of-type{margin-bottom:0}
  .tl-ch:nth-of-type(odd){margin-inline-end:auto}
  .tl-ch:nth-of-type(even){margin-inline-start:auto}
  .tl-ch:nth-of-type(odd) .tl-node{inset-inline-start:auto;inset-inline-end:-116px}
  .tl-ch:nth-of-type(even) .tl-node{inset-inline-start:-116px}
  .tl-node{width:56px;height:56px;font-size:24px;top:24px}
  .tl-shark{width:86px;height:86px}
}
@media (prefers-reduced-motion:reduce){.tl-fg{transition:none}}

/* ---- voices: quotes, reel-shaped videos, screenshots that open ---- */
.quotes{gap:26px;margin-top:46px}
.quote{padding:30px 26px}
.stars{font-size:23px}
.quote p{font-size:clamp(18.5px,1.6vw,21.5px)}
.quote b{font-size:19.5px}
.quote small{font-size:16.5px}
.vids{max-width:1100px;margin:40px auto 0;gap:clamp(12px,2vw,26px)}
.vid{aspect-ratio:9/16;border-radius:24px;border-width:7px}
.vid img{opacity:1}
.vid span{font-size:clamp(15px,1.35vw,18.5px);padding:46px 14px 14px;line-height:1.25}
.vid i{width:64px;height:64px;top:50%}
.vid i::before{border-width:11px 0 11px 18px}
.shots{column-gap:22px;margin-top:34px}
.shots img{margin-bottom:22px;cursor:zoom-in}
@media (max-width:520px){.vids{grid-template-columns:1fr 1fr}.vid{border-width:4px;border-radius:16px}.vid i{width:46px;height:46px}}
.lb{position:fixed;inset:0;z-index:100;background:rgba(22,30,54,.86);display:grid;place-items:center;padding:20px;animation:lb-in .2s ease-out}
.lb[hidden]{display:none}
@keyframes lb-in{from{opacity:0}}
.lb-in{display:grid;place-items:center;max-width:100%;max-height:100%}
.lb-in>img{width:min(92vw,820px);max-height:88vh;object-fit:contain;border-radius:14px;cursor:zoom-out}
.lb-reel{--h:min(86vh,860px,calc(92vw*16/9));position:relative;height:var(--h);width:calc(var(--h)*9/16);overflow:hidden;border-radius:24px;background:#000;border:6px solid var(--card)}
.lb-reel iframe{position:absolute;top:0;left:50%;height:100%;width:calc(var(--h)*16/9);translate:-50% 0;border:0}
.lb-x{position:absolute;top:16px;left:16px;width:50px;height:50px;border-radius:50%;border:0;background:var(--card);color:var(--flag);display:grid;place-items:center;cursor:pointer;box-shadow:3px 3px 0 var(--sky)}
.lb-x svg{width:22px;height:22px;stroke-width:2.6}

/* ---- founders: a note on each side of the photo ---- */
.founders{grid-template-columns:1fr minmax(300px,400px) 1fr;gap:clamp(22px,2.8vw,40px);margin-top:54px}
.founder{position:relative;margin:0;background:var(--card);padding:38px 28px 30px;box-shadow:0 10px 24px rgba(45,62,102,.10);border-radius:3px 3px 3px 28px;rotate:1deg}
.founder:first-child{rotate:-1deg;background:var(--sky-soft)}
.founder::before{content:"";position:absolute;top:-13px;right:50%;transform:translateX(50%) rotate(-2deg);width:112px;height:28px;background:rgba(255,255,255,.8);box-shadow:0 1px 3px rgba(45,62,102,.12)}
.founder h3{font-size:clamp(25px,2.3vw,32px);font-weight:900;display:flex;flex-direction:column;gap:2px}
.founder h3 small{font-family:"Amatic SC",cursive;font-weight:700;font-size:27px;line-height:1.1;margin:0}
.founder p{font-size:clamp(17.5px,1.5vw,19.5px);margin-top:12px}
.polaroid figcaption{font-size:36px}
@media (max-width:1100px){
  .founders{grid-template-columns:1fr 1fr}
  .founders .polaroid{grid-column:1/-1;order:-1;width:min(380px,100%);margin-inline:auto}
}
@media (max-width:700px){
  .founders{grid-template-columns:1fr}
  .founder,.founder:first-child{rotate:none}
}

/* ---- faq and the close ---- */
.faq{gap:12px;margin-top:38px}
.faq summary{font-size:clamp(18.5px,1.6vw,22px);padding:19px 24px}
.faq details p{font-size:clamp(17.5px,1.5vw,20px);padding:0 24px 22px}
.final-card p{font-size:clamp(19px,1.7vw,22.5px);max-width:640px}

@media (max-width:900px){
  .brief{grid-template-columns:1fr;padding:26px 18px 40px}
}
@media (max-width:620px){
  .app-top{padding:8px 12px;gap:8px}
  .app-top span{display:none}
  .sty-grid{grid-template-columns:1fr 1fr;gap:12px}
  .sty-c{aspect-ratio:2.2/1}
  .tl{padding-inline-start:60px}
  .tl-node{inset-inline-start:-60px;width:42px;height:42px;font-size:19px;top:18px}
  .tl-card{padding:18px 16px 16px}
  .tl-shark{width:52px;height:52px}
}

/* the rulings inside the demo box are as faint as the page's */
.app{background-image:repeating-linear-gradient(to bottom,transparent 0 37px,rgba(143,179,239,.10) 37px 38px)}
#why .btn{font-size:clamp(19px,1.7vw,22px);padding:17px 34px}

/* ---- 12.11: the shark chat types its answer; a refresh of the same screen does not replay entrance animations ---- */
.chat-log .typing{display:flex;gap:4px;padding:13px 14px}
.chat-log .typing i{width:7px;height:7px;border-radius:50%;background:#8a97b4;animation:blink 1s infinite}
.chat-log .typing i:nth-child(2){animation-delay:.15s}
.chat-log .typing i:nth-child(3){animation-delay:.3s}
.app.still .bt,.app.still .wm,.app.still .log li,.app.still .draft,.app.still .btile{animation:none}
.app.still .ph-chat .wm:last-child,.app.still .log li:last-child{animation:pop .22s}
.finish p:last-child{margin-bottom:0}
.demo-only{display:inline-flex;align-items:center;background:var(--sky-soft);border-radius:999px;padding:9px 20px;font-family:Rubik,sans-serif;font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap}

/* ---- 12.11: an optional photo on the first screen ---- */
.ph-pick{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.ph-add{display:flex;align-items:center;gap:14px;cursor:pointer;border:1.5px dashed var(--sky);background:var(--card);border-radius:16px;padding:10px 18px 10px 20px;transition:background .15s,border-color .15s}
.ph-add:hover{background:var(--sky-pale);border-color:var(--flag)}
.ph-add:focus-visible{outline:3px solid var(--flag);outline-offset:3px}
.ph-add.has{border-style:solid}
.ph-prev{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--sky-soft);color:var(--flag);overflow:hidden}
.ph-prev svg{width:26px;height:26px}
.ph-prev img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ph-tx{display:grid;gap:1px;min-width:0}
.ph-tx b{font-family:Rubik,sans-serif;font-weight:700;font-size:17px;color:var(--flag)}
.ph-tx small{font-size:14.5px;color:var(--ink-soft);line-height:1.35}
.ph-pick .link{font-size:15.5px}

/* ---- 12.11 (second recording): the journey line stays under the chapter numbers; a shark that really swims ---- */
.tl-ch{z-index:2}
.tl-shark{width:98px;height:58px;z-index:5;filter:drop-shadow(0 5px 6px rgba(45,62,102,.22))}
.tl-shark .shk{width:100%;height:100%;transform:scaleX(var(--face,1)) rotate(var(--tilt,0deg));transition:transform .5s cubic-bezier(.3,.8,.3,1)}
.tl-shark svg{display:block;width:100%;height:100%;overflow:visible;animation:sh-glide 2.8s ease-in-out infinite}
.tl-shark .body,.tl-shark .fin,.tl-shark .tail path{stroke:#2D3E66;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.tl-shark .body{fill:#A3C1F3}
.tl-shark .fin,.tl-shark .tail path{fill:#7FA6EC}
.tl-shark .belly{fill:#FFFEFB}
.tl-shark .line{fill:none;stroke:#2D3E66;stroke-width:1.8;stroke-linecap:round}
.tl-shark .eye{fill:#2D3E66}
.tl-shark .tail{transform-box:fill-box;transform-origin:0% 50%;animation:sh-tail 1.1s ease-in-out infinite}
.tl-shark.swim .tail{animation-duration:.28s}
.tl-shark.swim svg{animation:sh-wriggle .28s ease-in-out infinite}
@keyframes sh-tail{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
@keyframes sh-glide{50%{translate:0 -4px;rotate:1.5deg}}
@keyframes sh-wriggle{0%,100%{rotate:-3deg}50%{rotate:3deg}}
.tl-shark .shk{position:relative}
.tl-shark i{top:22%;left:-4%}
.tl-ch.cur .tl-node::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2.5px solid var(--sky);opacity:0;animation:tl-ripple 1.2s ease-out .55s}
@keyframes tl-ripple{from{opacity:.95;scale:.75}to{opacity:0;scale:2}}
@media (min-width:900px){.tl-shark{width:108px;height:63px}}
@media (max-width:620px){.tl-shark{width:76px;height:44px}}