:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#222660;background:#f7f9fc}
*{box-sizing:border-box}body{margin:0;min-height:100vh}.page{width:min(1100px,calc(100% - 48px));min-height:100vh;margin:auto;display:flex;flex-direction:column}
header{height:98px;display:flex;align-items:center;border-bottom:1px solid #dee3f0;gap:12px}.mark{width:40px;height:40px;border-radius:12px;background:#242778;color:white;display:grid;place-items:center;font-weight:800;font-size:22px}
.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{color:#747a91;font-size:12px;margin-top:3px}
main{padding:100px 0 90px;flex:1;max-width:640px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#297f17}h1{font-size:clamp(46px,7vw,75px);letter-spacing:-3px;line-height:1.05;margin:25px 0}h1 span{color:#2b8715}
p{font-size:19px;color:#626b83;line-height:1.6;max-width:560px}.example{margin-top:55px;padding:25px 28px;background:#fff;border:1px solid #dce2f3;box-shadow:0 12px 38px #20296c14;border-radius:14px}
.label{font-size:12px;font-weight:700;color:#65708d}.url{font-size:clamp(22px,4vw,31px);margin:24px 0}.url strong{color:#232c84}footer{border-top:1px solid #dee3f0;padding:23px 0;color:#78839a;font-size:12px}
header .manage-link{margin-left:auto;color:#232c84;font-size:13px;font-weight:700;text-decoration:none}

/* TLO identity: corporate blue, vivid green and restrained neutral surfaces. */
:root{--tlo-blue:#252875;--tlo-blue-deep:#1b205e;--tlo-green:#38c917;--tlo-green-dark:#287f15;--tlo-mist:#f5f9f4}
body{border-top:5px solid var(--tlo-green);background:radial-gradient(circle at 100% 30%,#edf1ff 0,transparent 46%),#f7f9fc}
header{height:106px}
header .brand-logo{width:60px;height:60px;object-fit:contain;border-radius:50%;background:white;flex:none}
.brand strong{color:var(--tlo-blue);font-size:15px}
.brand small{color:#397d27;font-size:11px;letter-spacing:.05px}
.hero-accent{width:68px;height:5px;border-radius:10px;background:var(--tlo-green);margin-top:24px}
main .eyebrow{color:var(--tlo-blue);display:flex;align-items:center;gap:10px}
main .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tlo-green)}
h1{color:var(--tlo-blue-deep)}
h1 span{color:var(--tlo-green-dark)}
.example{border-top:4px solid var(--tlo-green);box-shadow:0 20px 42px #24296a12}
.url strong{color:var(--tlo-blue)}
header .manage-link{color:var(--tlo-blue);border:1px solid #d3d9ec;background:white;padding:10px 16px;border-radius:9px}
header .manage-link:hover{border-color:var(--tlo-green);background:var(--tlo-mist)}
footer{color:#68718c}
@media(max-width:620px){header .brand-logo{width:47px;height:47px}.brand small{font-size:10px}.brand strong{font-size:12px}header .manage-link{font-size:11px;padding:8px 10px}main{padding:66px 0 76px}h1{letter-spacing:-2px}.example{padding:21px 19px}}