/* castd landing - the same quiet system as the app: one ink, hairlines, numbers and screenshots do the talking. */
:root{
  --bg:#FAFAF9; --elev:#FFFFFF; --fill:#F1F1EF; --line:#E8E8E5;
  --ink:#0B0B0C; --ink2:#3A3A40; --muted:#7A7A80; --good:#16955C;
  --phone:#0B0B0C;
  --f:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#09090A; --elev:#121214; --fill:#17171A; --line:#202024;
  --ink:#F4F4F5; --ink2:#C8C8CD; --muted:#85858C; --good:#3DD68C;
  --phone:#1C1C20;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.55;letter-spacing:-.008em;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p{margin:0}
main,.nav,.foot{max-width:1120px;margin:0 auto;padding-inline:20px}

.nav{display:flex;justify-content:space-between;align-items:center;height:64px;position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);max-width:none;padding-inline:max(20px,calc((100vw - 1120px)/2 + 20px))}
.brand{font-weight:600;letter-spacing:-.03em;text-decoration:none;font-size:18px}
.nav nav{display:flex;gap:6px;align-items:center}
.nav nav a{text-decoration:none;font-size:15px;color:var(--ink2);padding:8px 12px;border-radius:999px}
.nav nav a.signin{background:var(--ink);color:var(--bg);font-weight:500}

.eyebrow{font-size:14px;color:var(--muted);margin-bottom:14px;font-weight:500}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .15s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.note{font-size:14px;color:var(--muted);margin-top:14px}

/* hero */
.hero{display:grid;gap:48px;padding:48px 0 72px;align-items:center}
.hero h1{font-size:clamp(40px,9vw,72px);line-height:1.02;font-weight:600;letter-spacing:-.05em;max-width:12ch}
.lead{margin-top:22px;font-size:clamp(17px,2.4vw,20px);color:var(--ink2);max-width:36ch}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-art{position:relative;height:min(118vw,600px);max-width:520px;width:100%;justify-self:center}
.phone{margin:0;background:var(--phone);border-radius:46px;padding:9px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 30px 80px rgba(0,0,0,.18)}
.phone img{display:block;width:100%;height:auto;border-radius:38px}
.hero-art .phone{position:absolute;width:62%;max-width:290px}
.hero-art .front{left:0;top:0;z-index:2}
.hero-art .back{right:0;top:12%;opacity:.96}

/* problem */
.problem{padding:72px 0;border-top:1px solid var(--line)}
.problem p{font-size:clamp(24px,4.4vw,40px);line-height:1.18;font-weight:500;letter-spacing:-.035em;max-width:24ch}
.problem p.muted{margin-top:18px;font-size:clamp(17px,2.4vw,20px);font-weight:400;letter-spacing:-.008em;line-height:1.55;max-width:44ch}

/* features */
.features{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.features article{padding:28px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;column-gap:16px}
.features .num{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:3px;grid-row:span 2}
.features h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.features p{color:var(--ink2);margin-top:6px;font-size:16px}

/* showcase */
.show{padding:56px 0}
.show .row{display:grid;gap:32px;align-items:center;padding:40px 0}
.show .phone{width:min(78vw,320px);justify-self:center}
.show h2,.steps h2,.join h2{font-size:clamp(30px,5.4vw,46px);line-height:1.05;font-weight:600;letter-spacing:-.045em;max-width:16ch}
.show .row p:not(.eyebrow){margin-top:16px;color:var(--ink2);max-width:40ch}

/* steps */
.steps{padding:72px 0;border-top:1px solid var(--line)}
.steps ol{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;column-gap:16px}
.steps li::before{content:"0" counter(s);font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:4px;grid-row:span 2}
.steps b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.steps span{color:var(--ink2);margin-top:4px}

/* join */
.join{padding:72px 0 96px;border-top:1px solid var(--line);display:grid;gap:36px}
.join>div>p:not(.eyebrow){margin-top:16px;color:var(--ink2);max-width:40ch}
.form{display:grid;gap:14px;background:var(--elev);border-radius:28px;padding:24px;box-shadow:0 0 0 1px var(--line)}
.form label{display:grid;gap:6px;font-size:14px;color:var(--muted);font-weight:500}
.form .opt{font-weight:400}
.form input,.form select,.form textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--fill);border:0;border-radius:14px;padding:13px 14px;width:100%;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink)}
.form .btn{margin-top:6px;width:100%}
.form .note{margin-top:0;text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.thanks{margin-top:22px;padding:16px 18px;border-radius:16px;background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--ink);font-weight:500}

.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:28px 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot nav{display:flex;gap:18px}
.foot a{text-decoration:none}

@media (min-width:860px){
  .hero{grid-template-columns:1.05fr .95fr;padding:72px 0 96px}
  .hero-art{height:620px}
  .features{grid-template-columns:repeat(3,1fr);column-gap:40px}
  .show .row{grid-template-columns:.9fr 1.1fr;gap:72px}
  .show .row.flip>figure{order:2}
  .join{grid-template-columns:1fr 1fr;gap:72px;align-items:start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* "Kaip tai veikia": two phones playing the coach <-> client loop (landing.js) */
.how{padding:72px 0 64px;border-top:1px solid var(--line)}
.how-head h2{font-size:clamp(30px,5.4vw,46px);line-height:1.05;font-weight:600;letter-spacing:-.045em;max-width:16ch}
.how-grid{display:grid;gap:28px;margin-top:32px}
.how-stage{--acc:var(--ink);--acc-ink:var(--bg);display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:640px;width:100%;justify-self:center}
.how-stage.branded{--acc:#0E7C66;--acc-ink:#fff}
.dev{display:grid;gap:10px;justify-items:center}
.dev-l{font-size:13px;font-weight:500;color:var(--muted)}
.ph{width:100%;max-width:310px;background:var(--phone);border-radius:clamp(26px,8cqw,40px);padding:clamp(5px,1.6vw,8px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent),0 24px 60px rgba(0,0,0,.16);container-type:inline-size}
.scr{position:relative;aspect-ratio:9/17;border-radius:clamp(21px,7cqw,33px);background:var(--bg);overflow:hidden;font-size:4.9cqw;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.scr .sc{position:absolute;inset:0;padding:11% 6.5% 6%;display:flex;flex-direction:column;gap:.55em;opacity:0;transform:translateX(6%);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.scr .sc.on{opacity:1;transform:none}
.scr .mut{color:var(--muted);font-size:.85em}
.scr .h1{font-size:2.3em;font-weight:600;letter-spacing:-.045em;line-height:1}
.scr .h2{font-size:1.45em;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.scr b{font-weight:600}
.scr .chip,.scr .dots i,.scr .s5 i,.scr .days i{border-radius:99px;background:var(--fill);transition:background .25s,color .25s,transform .25s}
/* client: set logging */
.c-focus .sx{align-self:flex-end;font-family:var(--mono)}
.c-focus .hint{background:var(--fill);border-radius:.8em;padding:.6em .75em;font-size:.88em}
.c-focus .dots{display:flex;gap:.35em;margin-top:.2em}
.c-focus .dots i{font-style:normal;font-family:var(--mono);font-size:.8em;min-width:2.4em;height:2em;padding:0 .55em;display:grid;place-items:center;color:var(--muted)}
.c-focus .dots i.on{background:var(--ink);color:var(--bg)}
.c-focus .dots i.pr{background:#E5484D;color:#fff;transform:scale(1.08)}
.c-focus .dial{display:flex;justify-content:space-between;align-items:center;margin-top:.4em}
.c-focus .dial span{width:2.3em;height:2.3em;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--muted)}
.c-focus .dial b{font-family:var(--mono);font-size:3em;font-weight:300;letter-spacing:-.06em}
.c-focus .u{text-align:center;color:var(--muted);font-size:.8em;margin-top:-.5em}
.scr .pillx{margin-top:auto;height:2.8em;border-radius:99px;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-weight:600;transition:background .5s,transform .2s}
.scr .pillx.hit{transform:scale(.97)}
.c-focus .toast,.c-ci .sent{position:absolute;left:50%;bottom:16%;transform:translate(-50%,40%);opacity:0;background:var(--ink);color:var(--bg);font-size:.85em;font-weight:600;padding:.55em 1em;border-radius:99px;white-space:nowrap;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.c-focus .toast.on,.c-ci.sent .sent{opacity:1;transform:translate(-50%,0)}
/* client: check-in */
.c-ci .sr{display:flex;justify-content:space-between;align-items:center;gap:.4em;font-size:.9em}
.c-ci .s5{display:flex;gap:.25em}
.c-ci .s5 i{font-style:normal;width:1.9em;height:1.9em;display:grid;place-items:center;font-size:.85em}
.c-ci .s5 i.on{background:var(--acc);color:var(--acc-ink);transform:scale(1.1)}
.scr .inp{background:var(--fill);border-radius:.7em;padding:.6em .75em;font-size:.9em;color:var(--ink2)}
.scr .inp.tall{min-height:3.6em;color:var(--muted)}
/* client: today */
.c-today .brandrow{display:none;align-items:center;gap:.5em;font-size:.95em}
.branded .c-today .brandrow{display:flex}
.scr .lg{width:1.8em;height:1.8em;border-radius:.45em;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-weight:700;font-size:.9em;transition:background .5s}
.c-today .days{display:flex;gap:.35em}
.c-today .days i{font-style:normal;font-size:.8em;padding:.4em .8em;color:var(--muted)}
.c-today .days i.on{background:var(--acc);color:var(--acc-ink)}
.c-today .pc{max-height:0;opacity:0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:max-height .6s,opacity .5s,padding .5s;padding:0}
.c-today .pc.on{max-height:8em;opacity:1;padding:.6em 0}
.c-today .pc p{font-size:.92em;color:var(--ink2);margin-top:.2em}
.c-today .row{display:grid;grid-template-columns:1.8em 1fr 1.2em;gap:.5em;align-items:center;padding:.55em 0;border-bottom:1px solid var(--line);font-size:.9em}
.c-today .row b{font-family:var(--mono);font-weight:400;color:var(--good);font-size:.85em}
.c-today .row small{display:block;font-family:var(--mono);color:var(--muted);font-size:.8em}
.c-today .row i{width:1.1em;height:1.1em;border-radius:50%;box-shadow:inset 0 0 0 .14em var(--good)}
/* coach: inbox */
.t-inbox .hd{margin-top:.4em;padding-bottom:.4em;border-bottom:1px solid var(--line)}
.t-inbox .it{display:grid;gap:.35em;border-bottom:1px solid var(--line);padding:.6em 0;font-size:.9em}
.t-inbox .it1,.t-inbox .it2{max-height:0;opacity:0;padding:0;overflow:hidden;border-bottom-color:transparent;transition:max-height .6s cubic-bezier(.2,.8,.2,1),opacity .5s,padding .5s}
.t-inbox .it1.on,.t-inbox .it2.on{max-height:12em;opacity:1;padding:.6em 0;border-bottom-color:var(--line)}
.t-inbox .ih{display:flex;justify-content:space-between;gap:.4em;align-items:baseline}
.t-inbox .ih span{color:var(--muted);font-size:.8em;white-space:nowrap}
.t-inbox .ih .warn{color:#B9730E}
.t-inbox p{color:var(--ink2);font-size:.92em}
.t-inbox em{font-style:normal;color:#E5484D;font-weight:600}
.scr .ch{display:flex;gap:.3em;flex-wrap:nowrap;overflow:hidden}
.scr .chip{font-size:.8em;padding:.35em .7em;white-space:nowrap}
.scr .chip.on{background:var(--acc);color:var(--acc-ink)}
.scr .rrow{display:grid;grid-template-columns:1fr auto;gap:.35em}
.scr .rin{background:var(--fill);border-radius:.6em;padding:.45em .6em;font-size:.82em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr .rin.filled{color:var(--ink)}
.scr .go{background:var(--acc);color:var(--acc-ink);border-radius:.6em;padding:.45em .7em;font-size:.82em;font-weight:600;transition:background .5s}
.t-inbox .ok{display:none;color:var(--good);font-weight:600;font-size:.9em}
.t-inbox .it2.done .rrow,.t-inbox .it2.done .ch{display:none}
.t-inbox .it2.done .ok{display:block}
/* coach: group */
.t-group .gtop{display:grid;justify-items:center;gap:.1em;padding-bottom:.6em;border-bottom:1px solid var(--line)}
.t-group .b{max-width:85%;padding:.5em .75em;border-radius:1.1em;font-size:.9em}
.t-group .b small{display:block;color:var(--muted);font-size:.8em}
.t-group .them{background:var(--fill);align-self:flex-start;border-bottom-left-radius:.35em}
.t-group .me{background:var(--acc);color:var(--acc-ink);align-self:flex-end;border-bottom-right-radius:.35em;box-shadow:0 0 0 .15em #F2A93B;opacity:0;transform:translateY(.8em) scale(.96);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.t-group .me.on{opacity:1;transform:none}
.t-group .comp{margin-top:auto;display:grid;gap:.4em}
.t-group .comp .pin{justify-self:start}
.t-group .comp.sent .rin{color:var(--muted)}
.t-group .comp.sent .rin::after{content:""}
/* coach: brand */
.t-brand .bp{display:flex;align-items:center;gap:.6em;background:var(--fill);border-radius:.9em;padding:.65em}
.t-brand .bp .lg{width:2.4em;height:2.4em;font-size:1em}
.t-brand .bp small{display:block;color:var(--muted);font-size:.78em;font-weight:400}
.t-brand .sws{display:flex;gap:.45em}
.t-brand .sws i{width:2em;height:2em;border-radius:50%;background:var(--c);box-shadow:0 0 0 .18em var(--bg);transition:box-shadow .3s,transform .3s}
.t-brand .sws i.on{box-shadow:0 0 0 .18em var(--bg),0 0 0 .32em var(--ink);transform:scale(1.08)}
/* client notification + tap ripple */
.scr .notif{position:absolute;z-index:3;left:4%;right:4%;top:3.5%;display:flex;gap:.55em;align-items:center;padding:.6em .7em;border-radius:1em;background:color-mix(in srgb,var(--elev) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.18);font-size:.82em;opacity:0;transform:translateY(-150%);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s}
.scr .notif.on{transform:none;opacity:1}
.scr .notif .nlogo{flex:none;width:2.1em;height:2.1em;border-radius:.55em;background:#09090A url("/icon.svg") center/cover}
.scr .notif b{display:block}
.scr .notif .nt{display:block;color:var(--ink2)}
.scr .tap{position:absolute;z-index:4;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent);opacity:0;pointer-events:none}
.scr .tap.go{animation:tap .55s ease-out}
@keyframes tap{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
/* steps list */
.how-steps{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.how-steps li{position:relative;display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer;counter-increment:hs}
.how-steps{counter-reset:hs}
.how-steps li::before{content:"0" counter(hs);font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:2px;grid-row:span 2}
.how-steps b{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--muted);transition:color .3s}
.how-steps span{color:var(--ink2);font-size:15px;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s,opacity .35s,margin .3s}
.how-steps li.on b{color:var(--ink)}
.how-steps li.on span{max-height:5em;opacity:1;margin-top:4px}
.how-steps li i{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink)}
.how-steps li.on i{animation:prog var(--dur,5600ms) linear forwards}
.how.still .how-steps li.on i{animation:none;width:100%}
@keyframes prog{to{width:100%}}
@media (min-width:860px){
  .how-grid{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
  .how-steps{order:-1}
  .how-steps b{font-size:19px}
}
@media (max-width:380px){ .nav nav a:first-child{display:none} }
@media (prefers-reduced-motion:reduce){ .scr .sc,.scr .notif,.c-today .pc,.t-inbox .it1,.t-inbox .it2{transition:none!important} .scr .tap{display:none} }