/* ==========================================================================
   ProxyPacket shared components
   Rules used by two or more pages that are not part of the base. Loaded on every page after base.css.
   ========================================================================== */

/* Breadcrumb */
.crumb a:hover{color:var(--ink)}

/* Utilities */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Centered hero */
.cen{text-align:center}
.cen .lead{margin-inline:auto}
.cen .cta,.cen .ind,.cen .crumb{justify-content:center}

/* Icon cards */
.ucc h3{font-size:1.3rem;margin-top:6px}
.ucc .ds{color:var(--mut);font-size:.97rem}
.ucc:hover .bi{background:var(--ink);color:var(--bg);transform:rotate(-6deg) scale(1.06)}

/* Call-to-action band */
.cb .btn.ghost{background:transparent;color:#EAF2F0;border-color:#2A4552}

/* Compatible tools band */
.tools{padding:40px 0;border-block:1px solid var(--line)}
.tools h2{font-size:1.25rem;margin-bottom:18px}
.tl{display:flex;flex-wrap:wrap;gap:12px}
.tl img{width:32px;height:32px;object-fit:contain;border-radius:8px;background:#fff;padding:3px;flex:none}

/* Responsible-use cards */
.rc{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.rc .card{padding:26px;display:grid;gap:12px;align-content:start;background:var(--night);border-color:#16303C}
.rc p{color:#9DB3B0}
.rc a{color:#7CF0CB}

/* Dark sections */
.night .bi{background:#0F2C35;color:var(--b2)}

/* Compatible tools band */
@media(max-width:600px){
  .tools{padding:32px 0}
  .tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* Responsible-use cards */
@media(max-width:600px){
  .rc .card{padding:20px}
}

/* Highlight */
@media(prefers-reduced-motion:reduce){
  .hl{background-size:100% .3em}
}

/* Hero grid */
.hg{display:grid;gap:44px;align-items:center;grid-template-columns:minmax(0,1fr)}

/* Form rows */
.row{display:grid;gap:12px}
@media(min-width:600px){
  .row{grid-template-columns:1fr 1fr}
}

/* Use-case tiles */
.uc{padding:22px;display:grid;gap:12px}
.uc svg{width:100%;height:64px;color:var(--brand);background:var(--soft);border-radius:12px;padding:6px;fill:none}
.uc p{color:var(--mut);font-size:.96rem}

/* Plan cards */
.plan{padding:26px;display:grid;gap:8px;align-content:start;position:relative}
.plan .gb{color:var(--mut);font-weight:600}
.plan .pg1{font-weight:700}
.plan .sv{color:var(--brand);font-weight:600;font-size:.92rem;margin-bottom:12px}
.plan.pop{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-8px)}
.plan.pop .btn{background:var(--sun);color:#1B1400;border-color:var(--sun)}
.cs{margin-top:28px;padding:22px 26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
@media(max-width:600px){
  .plan.pop{transform:none}
}

/* Steps */
.st li{counter-increment:s;padding:24px;border-top:3px solid var(--b2);background:var(--soft);border-radius:0 0 16px 16px}
.st li:before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:800;margin-bottom:14px}
.st p{color:var(--mut);margin-top:6px}

/* Flags */
.fl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Plan cards */
@media(max-width:600px){
  .plan{grid-template-columns:1fr auto;column-gap:12px;row-gap:2px;padding:20px}
  .plan>*{grid-column:1}
  .plan .btn{grid-column:1/-1;margin-top:10px}
  .plan .sv{margin-bottom:0}
}

/* Country picker */
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{display:flex;align-items:center;gap:8px;min-height:44px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:.94rem;cursor:pointer;transition:border-color .2s,background .2s}
.pick button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Split layout */
.split{display:grid;gap:36px;align-items:center;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
}
.split .sh{margin-bottom:0}

/* Card grid */
.sg{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* Session log */
.log{display:grid;gap:8px}
.log.k span{background:var(--b2);color:#04251D}
.log div.on{border-color:var(--b2)}

/* Keyframes */
@keyframes shine{0%,35%{background-position:150% 0}100%{background-position:-50% 0}}

/* Reveal on scroll */
.js .plan.pop.in{transform:translateY(-8px)}
@media(max-width:600px){
  .js .plan.pop.in{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .js .plan.pop.in{transform:translateY(-8px)}
}

/* Keyframes */
@keyframes fx-ping{0%{box-shadow:0 0 0 0 rgba(18,184,134,.55)}70%,100%{box-shadow:0 0 0 12px rgba(18,184,134,0)}}
@keyframes fx-blink{50%{opacity:0}}
@keyframes fx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fx-draw2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,197,61,0)}50%{box-shadow:0 0 0 6px rgba(255,197,61,.2),0 26px 50px -24px rgba(255,197,61,.5)}}
@keyframes fx-scan{to{left:110%}}