/* titro.live/blog — scoped under .bl, prefixed bl-, same language as the
   homepage (home.css): ground #ECEDF0 (the hero loop has it baked in), brand
   black #17181D (baked into the style loops), yellow caption highlight.
   Base resets use :where() so they never beat a bl- component class. */
body:has(.bl){background:#ECEDF0}
body:has(.bl) .foot{background:#fff}

.bl{
  --bl-ground:#ECEDF0; --bl-card:#FFFFFF; --bl-ink:#0B0B0D; --bl-ink2:#4E4F55; --bl-ink3:#86878D; --bl-line:#DCDDE2;
  --bl-night:#17181D; --bl-night2:#212229; --bl-night-line:#30313A; --bl-on-night:#F2F2F4; --bl-on-night2:#A2A3AB;
  --bl-hi:#FFD400; --bl-cap:'Montserrat','Arial Black',sans-serif;
  color:var(--bl-ink);font-family:Geist,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
:where(.bl) :is(img,video){display:block;max-width:100%;height:auto}
:where(.bl) section{padding:0}
:where(.bl) :is(h1,h2,h3){margin:0;max-width:none;text-align:left;text-wrap:balance;letter-spacing:-.03em;line-height:1.08;color:inherit}
:where(.bl) :is(p,ul,ol,figure,table){margin:0}
:where(.bl) a{color:inherit}
.bl :focus-visible{outline:3px solid #00A9BA;outline-offset:3px;border-radius:6px}
.bl-wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.bl-col{max-width:700px;margin:0 auto}
@media (max-width:560px){.bl-wrap{padding-inline:16px}}
.bl .mk{background:var(--bl-hi);color:var(--bl-ink);border-radius:.12em;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* header */
.bl-head{padding-block:40px 48px}
.bl-crumbs{font-size:14px;color:var(--bl-ink3);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bl-crumbs a{text-decoration:none;color:var(--bl-ink2)}
.bl-crumbs a:hover{color:var(--bl-ink);text-decoration:underline;text-underline-offset:3px}
.bl-tag{display:inline-block;background:var(--bl-hi);color:var(--bl-ink);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 9px}
.bl-head h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;margin-top:20px;max-width:20ch}
.bl-dek{font-size:20px;line-height:1.55;color:var(--bl-ink2);margin-top:20px;max-width:58ch}
.bl-by{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:24px;font-size:14.5px;color:var(--bl-ink3)}
.bl-by b{color:var(--bl-ink);font-weight:650}
.bl-hero{margin-top:40px}
/* a tall hero (the phone loop) sits beside the headline instead of under it */
.bl-head.split{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.bl-head.split .bl-hero{margin-top:0}
@media (max-width:900px){.bl-head.split{grid-template-columns:1fr;gap:8px}.bl-head.split .bl-hero{margin-top:32px}}
.bl-hero figcaption,.bl-fig figcaption{font-size:14px;line-height:1.5;color:var(--bl-ink3);margin-top:12px;text-align:center;max-width:60ch;margin-inline:auto}

/* media */
.bl-loop{width:280px;margin-inline:auto;-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}
.bl-phone{width:250px;margin-inline:auto;filter:drop-shadow(0 22px 36px rgba(11,11,13,.16))}
.bl-chips{display:flex;flex-direction:column;align-items:center;gap:10px}
.bl-chip{font-family:var(--bl-cap);font-weight:800;text-transform:uppercase;color:#fff;background:var(--bl-night);border-radius:10px;padding:11px 15px;font-size:clamp(15px,2vw,21px);line-height:1.2}
.bl-chip .y{color:var(--bl-hi)}
.bl-langs{display:grid;gap:12px;max-width:520px;margin-inline:auto}
.bl-lr{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.bl-lr code{font-family:inherit;font-size:13px;font-weight:600;color:var(--bl-ink3);letter-spacing:.06em}
.bl-lr .bl-chip{justify-self:start}
.bl-time{background:var(--bl-card);border-radius:22px;padding:26px 28px;display:grid;gap:16px;max-width:860px;margin-inline:auto}
.bl-tb{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:center;font-size:15px}
.bl-tb .track{height:14px;border-radius:7px;background:#E2E3E8;position:relative;overflow:hidden}
.bl-tb .fill{position:absolute;inset:0 auto 0 0;border-radius:7px}
.bl-tb.manual .fill{width:100%;background:#9A9BA2}
.bl-tb.titro .fill{width:max(.56%,5px);background:var(--bl-hi);box-shadow:0 0 0 1px #E6BE00}
.bl-tb b{font-weight:650}
.bl-tb .v{font-variant-numeric:tabular-nums;font-weight:650;min-width:76px;text-align:right}
@media (max-width:600px){.bl-tb{grid-template-columns:1fr auto}.bl-tb .track{grid-column:1/-1;order:3}}
.bl-styles{background:var(--bl-night);border-radius:22px;padding:22px;display:grid;gap:6px}
.bl-styles video{width:100%;max-width:420px;margin-inline:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent),linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent),linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-composite:intersect}
.bl-styles span{font-size:13px;color:var(--bl-on-night2);text-align:center;margin-bottom:8px}
.bl-clip{position:relative;width:min(300px,80vw);border-radius:22px;overflow:hidden;background:#000;margin-inline:auto}
.bl-clip video{width:100%}
.bl-play{position:absolute;left:12px;right:12px;bottom:12px;height:46px;border-radius:999px;border:0;background:#fff;color:var(--bl-ink);font:inherit;font-weight:650;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.bl-play svg{width:14px;height:14px}

/* article body */
.bl-body{background:var(--bl-card);padding-block:56px 80px}
.bl-body .bl-col > * + *{margin-top:22px}
.bl-body p,.bl-body li{font-size:18.5px;line-height:1.7;color:#25262B}
.bl-body p a,.bl-body li a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--bl-hi)}
.bl-body h2{font-size:clamp(26px,3vw,34px);font-weight:800;margin-top:52px}
.bl-body ul{padding-left:22px;display:grid;gap:10px}
.bl-body ul li::marker{color:var(--bl-ink3)}
.bl-steps{list-style:none;padding:0;display:grid;gap:0;border-top:1px solid var(--bl-line)}
.bl-steps li{display:grid;grid-template-columns:42px 1fr;gap:14px;padding-block:18px;border-bottom:1px solid var(--bl-line)}
.bl-steps .n{width:30px;height:30px;border-radius:50%;background:var(--bl-hi);color:var(--bl-ink);font-weight:800;font-size:14px;display:grid;place-items:center;margin-top:2px}
.bl-steps h3{font-size:18.5px;font-weight:700;letter-spacing:-.015em;line-height:1.35}
.bl-steps p{font-size:17px;line-height:1.6;margin-top:4px;color:var(--bl-ink2)}
.bl-table{overflow-x:auto;border:1px solid var(--bl-line);border-radius:16px}
.bl-table table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px;line-height:1.45}
.bl-table th,.bl-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--bl-line)}
.bl-table thead th{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--bl-ink2);background:#F6F6F8}
.bl-table tbody th{font-weight:600}
.bl-table tbody td:last-child{background:rgba(255,212,0,.10)}
.bl-table thead th:last-child{background:var(--bl-hi);color:var(--bl-ink)}
.bl-table tr:last-child td,.bl-table tr:last-child th{border-bottom:0}
.bl-note{background:var(--bl-ground);border-radius:16px;padding:18px 20px;font-size:17px;line-height:1.6}
.bl-fig{margin-block:36px}
.bl-body .bl-col > .bl-fig{margin-top:36px}

/* end of article */
.bl-cta{background:var(--bl-night);color:var(--bl-on-night);border-radius:30px;padding:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;margin-top:56px}
.bl-cta h2{font-size:clamp(28px,3.4vw,40px);font-weight:800}
.bl-cta p{color:var(--bl-on-night2);margin-top:12px;font-size:17px}
.bl-cta .acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.bl-cta .badge-store img{width:132px;height:auto}
.bl-cta .stores{display:flex;flex-wrap:wrap;gap:10px}
.bl-cta .web{font-weight:650;font-size:15px;color:var(--bl-on-night);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.bl-cta{grid-template-columns:1fr;padding:34px 24px}}
.bl-more{padding-block:56px 72px}
.bl-more h2{font-size:24px;font-weight:800}
.bl-guides{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bl-guides a{background:var(--bl-card);border:1px solid var(--bl-line);border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:550;text-decoration:none}
.bl-guides a:hover{border-color:var(--bl-ink)}

/* cards (index + keep reading) */
.bl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.bl-cards.two{grid-template-columns:repeat(2,1fr)}
.bl-card{background:var(--bl-card);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;border:1px solid transparent;transition:border-color .15s}
.bl-card:hover{border-color:var(--bl-ink)}
.bl-card .bl-tag{align-self:flex-start}
.bl-card h3{font-size:23px;font-weight:800;line-height:1.15}
.bl-card p{font-size:15.5px;line-height:1.55;color:var(--bl-ink2)}
.bl-card .meta{font-size:13.5px;color:var(--bl-ink3);margin-top:auto;padding-top:8px}
@media (max-width:900px){.bl-cards,.bl-cards.two{grid-template-columns:1fr}}
.bl-index{padding-block:8px 80px}