/* titro.live homepage (2026-10 redesign). Loaded only on / and /de/.
   Everything is scoped under .hm and prefixed hm- so the 60+ landing pages,
   which share style.css, cannot be affected.
   --hm-ground must stay #ECEDF0: the hero video has that colour baked in
   behind the phone (global-src/media.py, GROUND). --hm-night is #17181D, the
   brand black, also baked into the style renders.
   Base resets use :where() (zero specificity) so they beat style.css's bare
   element rules by order but never override an hm- component class. */
body:has(.hm){background:#ECEDF0}
body:has(.hm) .foot{background:#fff}

.hm{
  --hm-ground:#ECEDF0; --hm-card:#FFFFFF; --hm-ink:#0B0B0D; --hm-ink2:#53545A; --hm-ink3:#86878D; --hm-line:#D9DADF;
  --hm-night:#17181D; --hm-night2:#212229; --hm-night-line:#30313A; --hm-on-night:#F2F2F4; --hm-on-night2:#A2A3AB;
  --hm-hi:#FFD400; --hm-cap:'Montserrat','Arial Black',sans-serif;
  color:var(--hm-ink);font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
:where(.hm) :is(img,video){display:block;max-width:100%;height:auto}
:where(.hm) section{padding:0}
:where(.hm) :is(h1,h2,h3){margin:0;max-width:none;text-align:left;text-wrap:balance;letter-spacing:-.035em;line-height:1.04;color:inherit}
:where(.hm) p{margin:0}
:where(.hm) a{color:inherit}
.hm :focus-visible{outline:3px solid #00A9BA;outline-offset:3px;border-radius:6px}
.hm-wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
@media (max-width:560px){.hm-wrap{padding-inline:16px}}
.hm-h2{font-size:clamp(34px,4.6vw,58px);font-weight:800}
.hm-sub{font-size:18.5px;line-height:1.55;color:var(--hm-ink2);margin-top:16px;max-width:54ch}
.hm-night .hm-sub{color:var(--hm-on-night2)}
.hm [id]{scroll-margin-top:96px}
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding-inline:22px;border-radius:999px;font:inherit;font-weight:650;font-size:15px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.hm-btn-ink{background:var(--hm-ink);color:#fff}
.hm-btn-hi{background:var(--hm-hi);color:var(--hm-ink)}
.hm-stores{display:flex;flex-wrap:wrap;gap:10px}
.hm-stores .badge-store img{width:132px;height:auto}

/* hero */
.hm-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-block:48px 80px}
.hm-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14.5px;color:var(--hm-ink2)}
.hm-kicker b{background:var(--hm-hi);color:var(--hm-ink);font-weight:700;border-radius:6px;padding:2px 8px}
.hm-hero h1{font-size:clamp(48px,7.4vw,96px);font-weight:800;margin-top:22px}
.hm-w{display:inline-block;border-radius:.1em;padding:0 .06em;margin:0 -.06em;transition:background-color .2s}
.hm-w.on{background:var(--hm-hi)}
.hm-lede{font-size:19px;line-height:1.55;color:var(--hm-ink2);max-width:40ch;margin-top:24px}
.hm-hero .hm-stores{margin-top:30px}
.hm-micro{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14.5px;color:var(--hm-ink2)}
.hm-micro b{color:var(--hm-ink);font-weight:650}
.hm-micro a{font-weight:600;color:var(--hm-ink);text-decoration:underline;text-underline-offset:3px}
.hm-hero-media{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}
/* the outer 6px are page colour; feathering them means no seam can show in a
   browser that decodes the video a level or two off */
.hm-feather{-webkit-mask-image:linear-gradient(to right,transparent,#000 6px,#000 calc(100% - 6px),transparent),linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 6px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 6px,#000 calc(100% - 6px),transparent),linear-gradient(to bottom,transparent,#000 6px,#000 calc(100% - 6px),transparent);mask-composite:intersect}
.hm-hero-media video,.hm-hero-media img{width:300px;height:auto}
.hm-hero-media figcaption{font-size:13px;color:var(--hm-ink3)}
.hm-hero-media figcaption b{color:var(--hm-ink2);font-weight:600}
@media (max-width:900px){.hm-hero{grid-template-columns:1fr;gap:40px;padding-block:28px 56px}.hm-hero-media video,.hm-hero-media img{width:260px}}

/* why */
.hm-white{background:var(--hm-card)}
.hm-why{padding-block:104px}
.hm-vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.hm-col{border-radius:24px;padding:30px}
.hm-col h3{font-size:22px;font-weight:750;letter-spacing:-.02em}
.hm-col ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;font-size:16.5px;line-height:1.45}
.hm-col li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.hm-col li svg{width:22px;height:22px;margin-top:1px}
.hm-col.them{background:var(--hm-ground);color:var(--hm-ink2)}
.hm-col.us{background:var(--hm-night);color:var(--hm-on-night)}
.hm-time{margin-top:20px;background:var(--hm-ground);border-radius:24px;padding:28px 30px;display:grid;gap:16px}
.hm-time .cap{font-size:14px;color:var(--hm-ink2)}
.hm-tb{display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:center;font-size:15px}
.hm-tb .track{height:14px;border-radius:7px;background:#DADBE0;position:relative;overflow:hidden}
.hm-tb .fill{position:absolute;inset:0 auto 0 0;border-radius:7px}
.hm-tb.manual .fill{width:100%;background:#9A9BA2}
.hm-tb.titro .fill{width:max(.56%,5px);background:var(--hm-hi);box-shadow:0 0 0 1px #E6BE00}
.hm-tb b{font-weight:650}
.hm-tb .v{font-variant-numeric:tabular-nums;font-weight:650;min-width:84px;text-align:right}
.hm-proof{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--hm-line)}
.hm-proof div{padding:22px 24px 0 0}
.hm-proof div+div{padding-left:24px;border-left:1px solid var(--hm-line)}
.hm-proof strong{display:block;font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hm-proof strong small{font-size:.55em;color:var(--hm-ink3);font-weight:700;margin-left:2px}
.hm-proof span{display:block;font-size:14.5px;color:var(--hm-ink2);margin-top:8px;max-width:28ch}
@media (max-width:820px){.hm-vs{grid-template-columns:1fr}.hm-tb{grid-template-columns:1fr auto}.hm-tb .track{grid-column:1/-1;order:3}.hm-proof{grid-template-columns:1fr}.hm-proof div+div{border-left:0;padding-left:0;border-top:1px solid var(--hm-line)}.hm-proof div{padding-bottom:20px}}

/* pricing */
.hm-pricing{padding-block:104px}
.hm-cycle{display:inline-flex;background:var(--hm-card);border-radius:999px;padding:4px;margin-top:32px;gap:2px}
.hm-cycle button{font:inherit;font-size:14px;font-weight:600;border:0;background:transparent;color:var(--hm-ink2);height:38px;padding-inline:18px;border-radius:999px;cursor:pointer}
.hm-cycle button[aria-pressed="true"]{background:var(--hm-ink);color:#fff}
.hm-cycle em{font-style:normal;font-size:12px;font-weight:700;background:var(--hm-hi);color:var(--hm-ink);border-radius:999px;padding:2px 7px;margin-left:6px}
.hm-prices{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:16px;margin-top:22px;align-items:start}
.hm-plan{background:var(--hm-card);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px}
.hm-plan.pick{outline:2px solid var(--hm-ink)}
.hm-plan .tier{display:block;font-family:inherit;font-size:14px;font-weight:700;color:var(--hm-ink);text-transform:capitalize}
.hm-plan .amt{font-size:54px;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.hm-plan .amt small{font-size:16px;font-weight:500;letter-spacing:0;color:var(--hm-ink2)}
.hm-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.45;color:var(--hm-ink2)}
.hm-plan li{padding-left:22px;position:relative}
.hm-plan li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:7px;border-left:2px solid var(--hm-ink);border-bottom:2px solid var(--hm-ink);transform:rotate(-45deg) translateY(-3px)}
.hm-plan li b{color:var(--hm-ink);font-weight:650}
.hm-plan .hm-btn{margin-top:auto}
.hm-cmp{background:var(--hm-night);color:var(--hm-on-night);border-radius:24px;padding:28px}
.hm-cmp h3{font-size:19px;font-weight:700;letter-spacing:-.02em}
.hm-cmp .s{font-size:14px;color:var(--hm-on-night2);margin-top:6px}
.hm-bars{display:grid;gap:14px;margin-top:22px}
.hm-bar{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:center;font-size:14.5px}
.hm-bar .t{height:32px;position:relative}
.hm-bar .f{position:absolute;inset:0 auto 0 0;border-radius:6px;background:#3A3B45;display:flex;align-items:center;justify-content:flex-end;padding-right:9px;font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums;min-width:64px}
.hm-bar.us .f{background:var(--hm-hi);color:var(--hm-ink)}
.hm-cmp .fine{font-size:12.5px;color:var(--hm-on-night2);margin-top:18px;line-height:1.5}
.hm-cmp a{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hm-pnote{font-size:14px;color:var(--hm-ink2);margin-top:22px;max-width:72ch}
@media (max-width:980px){.hm-prices{grid-template-columns:1fr 1fr}.hm-cmp{grid-column:1/-1}}
@media (max-width:600px){.hm-prices{grid-template-columns:1fr}}

/* night bands */
.hm-night{background:var(--hm-night);color:var(--hm-on-night)}
.hm-how{padding-block:104px;display:grid;grid-template-columns:auto 1fr;gap:72px;align-items:center}
.hm-clip{position:relative;width:min(320px,82vw);border-radius:24px;overflow:hidden;background:#000}
.hm-clip video{width:100%}
.hm-play{position:absolute;left:14px;right:14px;bottom:14px;height:48px;border-radius:999px;border:0;background:#fff;color:var(--hm-ink);font:inherit;font-weight:650;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.hm-play svg{width:14px;height:14px}
.hm-steps{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--hm-night-line)}
.hm-steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding-block:20px;border-bottom:1px solid var(--hm-night-line)}
.hm-steps .n{width:30px;height:30px;border-radius:50%;background:var(--hm-hi);color:var(--hm-ink);font-weight:800;font-size:14px;display:grid;place-items:center}
.hm-steps h3{font-size:19px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.hm-steps p{color:var(--hm-on-night2);font-size:15.5px;line-height:1.55;margin-top:4px;max-width:56ch}
@media (max-width:880px){.hm-how{grid-template-columns:1fr;gap:44px}.hm-clip{margin-inline:auto}}

/* devices */
.hm-devices{padding-block:104px}
.hm-dev-visual{display:flex;align-items:flex-end;justify-content:center;margin-top:44px}
.hm-dev-visual .mac{width:min(760px,78%)}
.hm-dev-visual .ph{width:min(190px,22%);margin-left:-7%;position:relative;filter:drop-shadow(0 24px 40px rgba(11,11,13,.18))}
.hm-dev-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;border-top:1px solid var(--hm-line);padding-top:28px}
.hm-dev-cols h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.hm-dev-cols p{color:var(--hm-ink2);font-size:15.5px;line-height:1.55;margin-top:8px}
.hm-dev-cols p a{text-decoration:underline;text-underline-offset:3px}
.hm-dev-cols .hm-stores{margin-top:16px}
.hm-dev-cols .lnk{display:inline-block;margin-top:16px;font-weight:650;font-size:15px}
@media (max-width:820px){.hm-dev-cols{grid-template-columns:1fr;gap:28px}}

/* features */
.hm-features{padding-block:104px}
.hm-frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:56px;border-bottom:1px solid var(--hm-line)}
.hm-frow:first-of-type{margin-top:28px}
.hm-frow.flip .ftext{order:2}
.hm-frow h3{font-size:clamp(28px,3.2vw,40px);font-weight:800}
.hm-frow p{font-size:17.5px;line-height:1.55;color:var(--hm-ink2);margin-top:14px;max-width:46ch}
.hm-fvis{display:flex;justify-content:center}
.hm-fvis .ph{width:250px;filter:drop-shadow(0 24px 40px rgba(11,11,13,.16))}
.hm-chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hm-chip{font-family:var(--hm-cap);font-weight:800;text-transform:uppercase;color:#fff;background:var(--hm-night);border-radius:10px;padding:11px 15px;font-size:clamp(15px,1.8vw,20px);line-height:1.2;letter-spacing:-.005em}
.hm-chip .y{color:var(--hm-hi)}
.hm-chips .src{font-size:13px;color:var(--hm-ink3);margin-top:6px}
.hm-langs{display:grid;gap:12px;width:100%;max-width:460px}
.hm-lr{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center}
.hm-lr code{font-family:inherit;font-size:13px;font-weight:600;line-height:1;color:var(--hm-ink3);letter-spacing:.06em}
.hm-more{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px;margin-top:56px}
.hm-more.c3{grid-template-columns:repeat(3,1fr)}
.hm-more div{padding-block:22px;border-top:1px solid var(--hm-line)}
.hm-more h3{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.hm-more p{font-size:15px;line-height:1.55;color:var(--hm-ink2);margin-top:6px}
@media (min-width:881px) and (max-width:1100px){.hm-more{grid-template-columns:1fr 1fr}.hm-more.c3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.hm-frow{grid-template-columns:1fr;gap:32px;padding-block:44px}.hm-frow.flip .ftext{order:0}.hm-more,.hm-more.c3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hm-more,.hm-more.c3{grid-template-columns:1fr}}

/* styles */
.hm-styles{padding-block:104px}
.hm-styles-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.hm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hm-tabs button{font:inherit;font-size:14px;font-weight:600;height:38px;padding-inline:16px;border-radius:999px;border:1px solid var(--hm-night-line);background:var(--hm-night2);color:var(--hm-on-night);cursor:pointer}
.hm-tabs button[aria-pressed="true"]{background:var(--hm-hi);border-color:var(--hm-hi);color:var(--hm-ink)}
.hm-stage video{width:100%;max-width:720px;margin-inline:auto}
.hm-stage p{font-size:13px;color:var(--hm-on-night2);text-align:center;margin-top:8px}
.hm-styles .hm-note{font-family:inherit;font-size:15px;line-height:1.55;color:var(--hm-on-night2);margin-top:26px;max-width:58ch}
@media (max-width:880px){.hm-styles-grid{grid-template-columns:1fr;gap:28px}}

/* faq */
.hm-faq{padding-block:104px;display:grid;grid-template-columns:.75fr 1.25fr;gap:56px}
.hm-faq .hm-h2{position:sticky;top:110px;align-self:start}
.hm-faq details{border-bottom:1px solid var(--hm-line);padding-block:20px}
.hm-faq details:first-child{border-top:1px solid var(--hm-line)}
.hm-faq summary{font-size:18px;font-weight:650;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;letter-spacing:-.01em;padding:0}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;color:var(--hm-ink3)}
.hm-faq details[open] summary::after{content:"\2212"}
.hm-faq details p{color:var(--hm-ink2);line-height:1.6;margin-top:10px;max-width:62ch}
.hm-faq details p a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:880px){.hm-faq{grid-template-columns:1fr;gap:24px}.hm-faq .hm-h2{position:static}}
.hm-guides{padding-block:0 104px}
.hm-guides-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.hm-guides-grid li{border-top:1px solid var(--hm-line);min-width:0}
.hm-guides-grid a{display:flex;flex-direction:column;gap:6px;padding-block:20px 22px;color:inherit;text-decoration:none}
.hm-guides-grid b{font-size:17px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.hm-guides-grid b::after{content:"\00a0\2192";color:var(--hm-ink3);font-weight:400}
.hm-guides-grid span{font-size:15px;line-height:1.5;color:var(--hm-ink2)}
.hm-guides-grid a:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){.hm-guides-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hm-guides{padding-block:0 72px}.hm-guides-grid{grid-template-columns:1fr}}

/* closer */
.hm-closer{background:var(--hm-night);color:var(--hm-on-night);border-radius:36px;padding:64px 56px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;margin-bottom:72px}
.hm-closer .mk{background:var(--hm-hi);color:var(--hm-ink);border-radius:.12em;padding:0 .08em}
.hm-closer .hm-sub{color:var(--hm-on-night2)}
.hm-closer .acts{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media (max-width:880px){.hm-closer{grid-template-columns:1fr;padding:44px 26px}}

@media (prefers-reduced-motion:reduce){.hm-w{transition:none}}

/* "Used in Prishtina by": one row of partner logos, white shapes on the night
   band, sized by visual mass in media.py (each img carries its own 2x size). */
.hm-strip{border-top:1px solid var(--hm-night-line)}
.hm-used{padding:72px 0}
.hm-used-h{margin:0 0 28px;font:500 12px/1 var(--hm-mono,"Geist Mono",ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--hm-on-night2);text-align:center}
.hm-used-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 56px}
.hm-used-row li{display:flex;align-items:center}
.hm-used-row img{display:block;height:var(--ph);width:auto;opacity:.82}
@media (max-width:720px){
  .hm-used{padding:52px 0}
  .hm-used-row{gap:22px 36px}
  .hm-used-row img{height:calc(var(--ph) * .72)}
}