/* A small, original illustration system for Tammi's telecom pages. */
.visual-hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:28px;padding-block:36px 32px}
.visual-hero h1{font-size:clamp(38px,4.3vw,56px);line-height:1.16;letter-spacing:-.045em;margin-bottom:21px}
.visual-hero .hero-copy>p{max-width:390px;font-size:18px;line-height:1.65}
.visual-hero .hero-copy .hero-note{font-size:12px;margin-top:24px}
.visual-hero .hero-actions{margin-top:25px}
.hero-art{aspect-ratio:680/520;min-width:0;display:flex;align-items:center;justify-content:center}
.hero-art>svg{display:block;width:100%;height:auto;overflow:visible}
.hero-art .float-device{animation:device-settle 1.3s cubic-bezier(.2,.75,.3,1) both}
.hero-art .signal-wave{transform-box:fill-box;transform-origin:center;animation:signal-connect 1.6s ease-in-out .3s 2}
@keyframes device-settle{from{transform:translateY(16px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes signal-connect{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(.94);opacity:.28}}
.visual-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lilac{background:#eef0ff}.mint{background:#e3f4ed}.peach{background:#fff0dc}
.visual-route{position:relative;display:grid;grid-template-columns:124px 1fr;align-items:center;gap:8px;min-height:151px;border-radius:18px;text-decoration:none;padding:17px 25px 17px 8px;border:1px solid transparent;transition:border-color .18s ease}
.route-art{display:flex;align-items:center}
.route-art img{display:block;width:100%;height:auto;transition:transform .22s ease}
.route-copy h2{font-size:19px;margin:0 0 7px;letter-spacing:-.025em}
.route-copy p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}
.route-arrow{position:absolute;top:12px;right:16px;font-size:20px;color:var(--ink)}
.visual-route:hover,.visual-route:focus-visible{border-color:var(--blue)}
.visual-route:hover .route-art img,.visual-route:focus-visible .route-art img{transform:translateY(-3px)}
.visual-home .provider-strip{padding-block:35px;gap:50px}
.visual-home .provider-strip h2{font-size:15px;color:var(--muted);font-weight:400}
.visual-home .section{padding-block:42px}
.visual-home .section-heading h2{font-size:29px;margin:0}
.illustrated-guide{padding:0;overflow:hidden;border-radius:13px}
.guide-cover{display:flex;width:100%;align-items:center;justify-content:center;overflow:hidden}
.guide-cover img{width:100%;height:192px;object-fit:contain;display:block;transition:transform .22s ease}
.illustrated-guide:hover .guide-cover img,.illustrated-guide:focus-visible .guide-cover img{transform:translateY(-3px)}
.guide-copy{padding:20px 23px 23px;display:flex;flex-direction:column;align-items:flex-start;flex:1;width:100%}
.illustrated-guide .guide-topic{margin-bottom:9px;font-size:12px}
.illustrated-guide h3{font-size:21px;line-height:1.35;margin-bottom:12px;letter-spacing:-.025em}
.illustrated-guide .read-link{font-size:13px;padding-top:5px}
.read-link>span{margin-left:7px}
.source-strip{border-top:1px solid var(--line);padding-block:30px 24px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.source-strip h2{font-size:21px;margin:0 0 7px}
.source-strip p{color:var(--muted);font-size:14px;margin:0}
.source-strip .text-link{flex-shrink:0}
.intro-illustrated{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:35px;align-items:center;padding-block:0 25px}
.intro-illustrated h1{margin-bottom:16px}
.intro-illustrated p{color:var(--muted);font-size:17px;line-height:1.7;max-width:780px;margin-bottom:0}
.intro-illustrated>img{display:block;width:100%;height:auto}
@media(max-width:1050px){
  .visual-hero{gap:18px}.visual-hero h1{font-size:46px}
  .visual-routes{gap:12px}.visual-route{grid-template-columns:100px 1fr;gap:2px;padding-right:20px}
  .route-copy h2{font-size:17px}.route-copy p{font-size:12px}.guide-cover img{height:172px}
}
@media(max-width:800px){
  .visual-hero{grid-template-columns:1fr 1fr;padding-block:34px;gap:5px}
  .visual-hero h1{font-size:37px}.visual-hero .hero-copy>p{font-size:16px}
  .visual-hero .hero-actions{margin-top:21px}.hero-compare-links{gap:8px}
  .visual-hero .hero-compare-links .button{font-size:12px;padding-inline:10px}
  .visual-routes{gap:10px}.visual-route{grid-template-columns:1fr;padding:12px 17px 20px;gap:0;align-content:start}
  .route-art{height:108px;justify-content:center}.route-art img{width:170px}
  .route-copy h2{font-size:18px}.route-copy p{font-size:12px}
  .visual-home .provider-strip{gap:16px;padding-block:28px}
  .visual-home .provider-strip>div{justify-content:space-between}
  .visual-home .guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .guide-cover img{height:145px}.guide-copy{padding:16px}.illustrated-guide h3{font-size:18px}
  .source-strip{align-items:flex-start}.source-strip p{font-size:13px}
  .intro-illustrated{grid-template-columns:minmax(0,1fr) 170px;gap:20px}
  .intro-illustrated h1{font-size:34px}.intro-illustrated p{font-size:16px}
}
@media(max-width:600px){
  .visual-hero{grid-template-columns:1fr;gap:0;padding-block:30px 20px}
  .visual-hero h1{font-size:39px;line-height:1.15;margin-bottom:15px}
  .visual-hero .hero-copy>p{max-width:340px;font-size:16px}
  .visual-hero .hero-copy .hero-note{font-size:11px;margin:19px 0 0}
  .visual-hero .hero-actions{gap:11px;margin-top:22px}
  .hero-art{width:min(100%,410px);margin-inline:auto;margin-top:6px}
  .visual-routes{grid-template-columns:1fr;gap:12px}
  .visual-route{grid-template-columns:115px 1fr;min-height:116px;padding:8px 28px 8px 8px;gap:10px;border-radius:14px;align-items:center;align-content:normal}
  .route-art{height:auto}.route-art img{width:100%}
  .route-copy h2{font-size:20px;margin-bottom:5px}.route-copy p{font-size:13px}
  .route-arrow{top:10px;right:13px}
  .visual-home .provider-strip>div{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px}
  .visual-home .section{padding-block:31px}
  .visual-home .section-heading{gap:13px}.visual-home .section-heading h2{font-size:27px}
  .visual-home .guide-grid{grid-template-columns:1fr;gap:20px}
  .guide-cover img{height:190px}.guide-copy{padding:21px}.illustrated-guide h3{font-size:22px}
  .source-strip{flex-direction:column;gap:16px;padding-block:26px 20px}
  .intro-illustrated{grid-template-columns:minmax(0,1fr) 98px;gap:12px;align-items:start;padding-block:5px 25px}
  .intro-illustrated>div{display:contents}
  .intro-illustrated h1{font-size:30px;line-height:1.25}
  .intro-illustrated p{font-size:15px;grid-column:1/-1;grid-row:2}.intro-illustrated>img{margin-top:6px;grid-column:2;grid-row:1}
}
@media(max-width:380px){.visual-hero h1{font-size:34px}.visual-route{grid-template-columns:96px 1fr}.route-copy h2{font-size:18px}.route-copy p{font-size:12px}.intro-illustrated{grid-template-columns:minmax(0,1fr) 72px}.intro-illustrated h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){
  .hero-art .float-device,.hero-art .signal-wave{animation:none!important;transform:none;opacity:1}
  .visual-route,.route-art img,.guide-cover img{transition:none!important}
  .visual-route:hover .route-art img,.visual-route:focus-visible .route-art img,.illustrated-guide:hover .guide-cover img,.illustrated-guide:focus-visible .guide-cover img{transform:none}
}