/* Upzilla design v3 — the parts of the inner pages (monitors, tools, pricing, solutions, articles,
   comparisons). Loaded after site.css on every page but the homepage, whose sections have their own
   styles. The pages share class names (.card, .panel, .cta-band, ...), so one rule here restyles
   the same part on every page that has it. */

/* ---------------------------------------------------------------- type */
.tag{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.tag::before{content:"";flex:none;width:18px;height:6px;border-radius:3px;background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink);}
.plan.pro .tag::before,.pc-sum .tag::before{box-shadow:none;}
/* the articles' own eyebrow */
.art-hero .kicker{display:inline-flex;align-items:center;gap:10px;letter-spacing:.1em;color:var(--ink-soft);}
.art-hero .kicker::before{content:"";flex:none;width:18px;height:6px;border-radius:3px;background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink);}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px;}
.hero h1{font-size:50px;line-height:1.04;letter-spacing:-.04em;}
.pr-head h1{font-size:58px;line-height:1.02;letter-spacing:-.045em;}
h1.title{font-size:40px;line-height:1.08;letter-spacing:-.035em;}
.section-head h2,.content-section h2{font-size:34px;line-height:1.08;font-weight:700;letter-spacing:-.035em;}
.content-section h2{font-size:28px;}
.doc-link,.content-section p a,.content-section li a,.intro-block a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:3px;}
.doc-link:hover,.content-section p a:hover,.content-section li a:hover,.intro-block a:hover{text-decoration-color:var(--ink);}
mark{background:var(--yellow-2);}
/* one gutter for every .wrap, the same as the nav's: the pages' own ".hero{padding:26px 0 50px}",
   ".section{padding:56px 0}" and the like zeroed the sides of the blocks that are also a .wrap */
.wrap{padding-left:32px;padding-right:32px;}
@media (max-width:900px){.pr-head h1{font-size:42px;}}
@media (max-width:600px){
  .wrap,.wrap.wide{padding-left:16px;padding-right:16px;}
  /* the pages' own ".wrap{padding:0 20px}" also wiped the top and bottom of every section */
  .section{padding-top:44px;padding-bottom:44px;}
  .hero h1{font-size:34px;}
  .pr-head h1{font-size:36px;}
  h1.title{font-size:28px;}
  .section-head h2,.content-section h2{font-size:26px;}
}

/* ---------------------------------------------------------------- cards: white, ink outline, round */
.card,.panel,.step,.plan,.pc-block,.info-card,.compare,.shot,
.tool-card,.res-card,.cs-card,.docs-band,.callout,.today,.verdict,.finder-box{border:1.5px solid var(--ink);border-radius:20px;background:var(--card);}
.tool-card.soon{border-color:var(--line);background:transparent;}
.cs-card.dark{background:var(--night);border-color:var(--night);}
.callout .btn{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);}
.card,.info-card{padding:22px 22px 24px;}
.plan.pro{background:var(--night);border-color:var(--night);}
.pc-block.off{background:transparent;border-color:var(--line);}
.compare > div:first-child{border-right:1.5px solid var(--ink);}
.shot figcaption{border-top:1.5px solid var(--ink);}
/* the uptime strip of the monitor pages is wider than a phone: let it clip instead of widening the page */
.hero > *{min-width:0;}
.strip{overflow:hidden;}
.stat,.loc,.probe,.out,.tblwrap,.opt-table,.mock-box{border-radius:14px;}
.out.dark{background:var(--night);border-color:var(--night);}
/* a card that is a link lifts like the homepage tiles */
a.card,a.info-card,a.tool-card,a.res-card{transition:transform .15s ease,box-shadow .15s ease;}
a.card:hover,a.info-card:hover,a.tool-card:not(.soon):hover,a.res-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);border-color:var(--ink);}
@media (prefers-reduced-motion:reduce){a.card,a.info-card,a.tool-card,a.res-card{transition:none;}}

/* numbered steps: the homepage's yellow badge */
.step::before{background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);width:32px;height:32px;font-size:14px;}
.use{border-left:4px solid var(--yellow);}

/* ---------------------------------------------------------------- chips and pills */
.channel,.rel-chip,.related-chip,.pc-inc span.chip{border-radius:999px;}
.channel .dot{background:var(--up);}
.rel-chip,.related-chip{border:1.5px solid var(--ink);font-weight:500;transition:background .12s ease;}
.rel-chip:hover,.related-chip:hover{background:var(--yellow);border-color:var(--ink);color:var(--ink);}
/* .note is a callout box on the tool pages and a line of small print elsewhere */
.tool .note,.content-section .note{border-left:4px solid var(--yellow);}

/* ---------------------------------------------------------------- dark call to action */
.cta-band{background:var(--night);border-radius:28px;padding:44px 48px;}
.cta-band h2{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.035em;color:#F6F7F9;}
.cta-band p{color:#AEB4BE;font-size:15px;}
.cta-band .btn-primary,.cta-band .btn-inv{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:4px 4px 0 var(--yellow-deep);}
@media (max-width:600px){.cta-band{padding:30px 22px;border-radius:22px;}.cta-band h2{font-size:24px;}}

/* ---------------------------------------------------------------- pricing */
.plan.pro .btn-inv,.pc-sum .btn{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:3px 3px 0 var(--yellow-deep);}
.plan.pro li{border-top-color:var(--night-line);}
.pc-sum{background:var(--night);border-radius:20px;}
.pc-lines li{border-top-color:var(--night-line);}
.pc-total{border-top-color:#3A3F47;}
.pc-bill{border:1.5px solid var(--ink);border-radius:999px;}
.pc-bill button{border-radius:999px;}
.pc-bill .save{background:var(--yellow);color:var(--ink);}
.pc-bill button[aria-pressed=true] .save{background:var(--yellow);color:var(--ink);}
.pc-switch[aria-checked=true]{background:var(--ink);}
.pc-switch[aria-checked=true]::after{background:var(--yellow);}
.pc-sms button{border-radius:12px;}
.pc-sms button[aria-pressed=true]{border-color:var(--ink);}
.pt-wrap{border:1.5px solid var(--ink);border-radius:16px;}
table.cmp th{background:var(--paper-2);border-bottom:1.5px solid var(--ink);}
table.cmp th.pro{background:var(--yellow);color:var(--ink);border-bottom-color:var(--ink);}
table.cmp td.pro{background:#FFFAE8;}
/* comparison pages: the Upzilla column, green in v2 */
.compare-table th.col-us{background:var(--yellow);color:var(--ink);border-bottom-color:var(--ink);}
.compare-table td.col-us{background:#FFFAE8;}
.compare-table th{border-bottom:1.5px solid var(--ink);}

/* ---------------------------------------------------------------- coming soon: v2 lit it green, v3 yellow */
.cs-hero{background-color:var(--night);}
.cs-hero::before{background:conic-gradient(from 0deg at 70% 60%,rgba(255,194,26,0),rgba(255,194,26,.16),rgba(201,143,0,.10),rgba(255,214,92,.12),rgba(255,194,26,0));}
.cs-hero h1 em{background:linear-gradient(90deg,var(--yellow),var(--yellow-2));-webkit-background-clip:text;background-clip:text;}
.cs-cta .go{background:var(--yellow);border-color:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--yellow-deep);}
.cs-card.ai::after{background:radial-gradient(circle,rgba(255,194,26,.30),transparent 70%);}

/* ---------------------------------------------------------------- tools */
.tool input:focus,.tool select:focus,.tool textarea:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink);}
.seg button{border-radius:999px;}
.seg button.active{background:var(--ink);color:var(--yellow);}