/* ═══════════════════════════════════════════════════════════════════════
   opnr.cc — design system
   Palette: warm paper + ink + signal red + route green
   Type: Big Shoulders (display) · Inter (body) · JetBrains Mono (data/links)
═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:      #FAF7F2;
  --paper-dim:  #F1EDE4;
  --ink:        #15181D;
  --ink-soft:   #565B66;
  --ink-faint:  #8A8F99;
  --card:       #FFFFFF;
  --line:       rgba(21,24,29,.10);
  --line-soft:  rgba(21,24,29,.06);
  --signal:     #FF4433;
  --signal-dark:#D8331F;
  --signal-tint:#FFE9E4;
  --route:      #1F7A5C;
  --route-tint: #E3F3EC;
  --night:      #15181D;
  --night-soft: #20242B;
  --night-line: rgba(250,247,242,.10);
  --paper-on-night: #F5F2EC;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow-card: 0 1px 2px rgba(21,24,29,.04), 0 12px 32px rgba(21,24,29,.07);
  --shadow-pop:  0 8px 24px rgba(216,51,31,.24);
  --font-display: 'Big Shoulders', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:200}
.skip-link:focus{left:12px; top:12px}
:focus-visible{outline:2.5px solid var(--signal); outline-offset:2px; border-radius:4px}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; margin:0; color:var(--ink)}
p{margin:0}
.mono{font-family:var(--font-mono)}

.status-line{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em;
  color:var(--ink-faint); display:inline-flex; align-items:center; gap:.5rem;
}
.status-line::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--route); box-shadow:0 0 0 3px var(--route-tint); flex-shrink:0}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  padding:.85rem 1.5rem; border-radius:100px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .12s, box-shadow .12s, background .15s, color .15s;
  white-space:nowrap; line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn-signal{background:var(--signal); color:#fff; box-shadow:var(--shadow-pop)}
.btn-signal:hover{background:var(--signal-dark)}
.btn-ink{background:var(--ink); color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-outline:hover{border-color:var(--ink)}
.btn-sm{padding:.55rem 1.1rem; font-size:.83rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.6; cursor:default}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.site-nav{position:sticky; top:0; z-index:100; background:rgba(250,247,242,.92); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line)}
.navrow{display:flex; align-items:center; gap:1.75rem; height:68px}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--ink)}
.brand-dot{color:var(--ink-faint); font-weight:600}
.nav-links{display:flex; align-items:center; gap:1.6rem; margin-right:auto; font-weight:600; font-size:.92rem}
.nav-links a{text-decoration:none; color:var(--ink-soft); position:relative; padding:.3rem 0}
.nav-links a:hover, .nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--signal); border-radius:2px}
.nav-cta{margin-left:.25rem}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); cursor:pointer; padding:.4rem; margin-left:auto}
.mobile-nav{display:none; flex-direction:column; border-top:1px solid var(--line); padding:.5rem 24px 1rem}
.mobile-nav a{padding:.7rem 0; text-decoration:none; color:var(--ink-soft); font-weight:600; border-bottom:1px solid var(--line-soft)}
.mobile-nav a.active{color:var(--signal)}
.mobile-nav.open{display:flex}
@media (max-width:860px){
  .nav-links, .nav-cta{display:none}
  .nav-toggle{display:inline-flex}
}

/* ── Hero (tool-first, centered) ─────────────────────────────────────── */
.hero{padding:56px 0 8px; position:relative; overflow:hidden; text-align:center}
.hero-inner{max-width:720px; margin:0 auto}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--signal-dark);
  background:var(--signal-tint); border:1px solid rgba(216,51,31,.18); border-radius:100px; padding:.4rem .85rem;
  margin-bottom:1.25rem;
}
.hero h1{
  font-size:clamp(2rem, 4.6vw, 3.1rem); line-height:1.08; letter-spacing:-.015em;
  margin-bottom:1.1rem;
}
.hero h1 .accent{color:var(--signal); display:block; font-size:.62em; text-transform:none; font-weight:700; margin-top:.5rem; letter-spacing:-.005em}
.hero-sub{font-size:1.1rem; color:var(--ink-soft); max-width:600px; line-height:1.65; margin:0 auto 2rem}
.hero-proof{display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:1.75rem; justify-content:center}
.proof-item{display:flex; flex-direction:column; gap:.15rem; align-items:center}
.proof-num{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--ink)}
.proof-label{font-size:.78rem; color:var(--ink-faint)}

/* ── Ad units — auto-scaled to fit, always centered ──────────────────── */
.ad-block{padding:32px 0; text-align:center}
.ad-label{display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.7rem}
.ad-fixed-wrap{display:flex; justify-content:center; align-items:center; overflow:hidden; width:100%}
.ad-fixed-inner{flex-shrink:0; transform-origin:top center}

/* ── Steps + visual (paired) ─────────────────────────────────────────── */
.steps-visual-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
@media (max-width:900px){ .steps-visual-grid{grid-template-columns:1fr; gap:2.25rem} }
.steps-list{display:flex; flex-direction:column; gap:1rem}
.step-row{display:flex; gap:1rem; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.25rem 1.4rem}
.step-row .step-num{font-size:1.6rem; margin-bottom:0; -webkit-text-stroke:1.2px var(--signal); flex-shrink:0; line-height:1.3}
.step-row h3{font-size:1.02rem; text-transform:none; margin-bottom:.25rem}
.step-row p{color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin:0}

/* Route/ping visual — the signature element */
.route-visual{position:relative; background:var(--night); border-radius:var(--radius-lg); padding:2.1rem 1.6rem; overflow:hidden; min-height:280px; display:flex; flex-direction:column; justify-content:space-between}
.route-visual::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 0%, rgba(255,68,51,.16), transparent 55%)}
.route-status{position:relative; z-index:1; color:var(--paper-on-night); font-family:var(--font-mono); font-size:.75rem; opacity:.75; display:flex; justify-content:space-between}
.route-track{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:2.2rem 0}
.route-node{display:flex; flex-direction:column; align-items:center; gap:.6rem; flex-shrink:0}
.route-node-icon{width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--night-soft); border:1px solid var(--night-line)}
.route-node-label{font-size:.72rem; color:var(--paper-on-night); opacity:.6; font-family:var(--font-mono)}
.route-path{flex:1; height:2px; position:relative; margin:0 .5rem; background:repeating-linear-gradient(90deg, var(--night-line) 0 6px, transparent 6px 12px); top:-24px}
.route-ping{position:absolute; top:-4px; left:0; width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px rgba(255,68,51,.25); animation:ping-travel 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes ping-travel{ 0%{left:0; opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:calc(100% - 9px); opacity:0} }
.route-caption{position:relative; z-index:1; color:var(--paper-on-night); opacity:.85; font-size:.86rem; line-height:1.55}
.route-caption b{color:var(--paper-on-night); opacity:1}

/* ── Tool card ───────────────────────────────────────────────────────── */
.tool-section{padding:8px 0 56px}
.tool-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.9rem; box-shadow:var(--shadow-card)}
.tool-row{display:flex; gap:.6rem; margin-bottom:.75rem}
@media (max-width:640px){ .tool-row{flex-direction:column} }
.input-wrap{flex:1; position:relative}
.input-icon{position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none}
.field{
  width:100%; border:1.5px solid var(--line); border-radius:12px; background:var(--paper);
  padding:.95rem 1.1rem .95rem 2.6rem; font-size:.98rem; font-family:var(--font-body); color:var(--ink);
  transition:border-color .15s, background .15s;
}
.field:focus{outline:none; border-color:var(--signal); background:#fff}
.field-err{border-color:#DC2626 !important}
.tool-code-row{display:flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); overflow:hidden; margin-bottom:.6rem}
.tool-code-prefix{font-family:var(--font-mono); font-size:.85rem; color:var(--ink-faint); padding:.85rem 0 .85rem 1.1rem; white-space:nowrap}
.tool-code-input{flex:1; border:none; background:transparent; padding:.85rem .8rem; font-family:var(--font-mono); font-size:.9rem; color:var(--ink); min-width:0}
.tool-code-input:focus{outline:none}
.code-hint{font-size:.75rem; padding-right:1rem; font-family:var(--font-mono); white-space:nowrap}
.hint-ok{color:var(--route)}
.hint-err{color:#DC2626}
.hint-check{color:var(--ink-faint)}
.field-note{font-size:.79rem; color:var(--ink-faint); margin-bottom:0}
.error-msg{display:flex; align-items:center; gap:.45rem; color:#DC2626; font-size:.85rem; margin-top:.6rem; font-weight:600}

.result-card{display:flex; flex-direction:column; gap:1rem}
.result-status{display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--route); font-size:.95rem}
.result-link-row{display:flex; align-items:center; gap:.6rem; background:var(--paper); border:1.5px dashed var(--line); border-radius:12px; padding:.9rem 1.1rem; flex-wrap:wrap}
.result-link{font-family:var(--font-mono); font-weight:600; font-size:1rem; word-break:break-all; flex:1; color:var(--ink)}
.result-actions{display:flex; gap:.6rem; flex-wrap:wrap}
.result-note{font-size:.82rem; color:var(--ink-faint)}

.spinner{width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite}
@keyframes spin{ to{transform:rotate(360deg)} }
.hidden{display:none !important}

/* ── Sections generic ────────────────────────────────────────────────── */
section{padding:76px 0}
.section-head{max-width:640px; margin:0 auto 3rem; text-align:center}
.section-head.left{margin:0 0 2.75rem; text-align:left}
.section-eyebrow{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--signal-dark); margin-bottom:.75rem; display:block}
.section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.6rem); text-transform:uppercase; line-height:1.05; margin-bottom:.75rem}
.section-sub{color:var(--ink-soft); font-size:1.02rem; line-height:1.6}

/* ── Steps ───────────────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
@media (max-width:800px){ .steps{grid-template-columns:1fr} }
.step-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.75rem}
.step-num{font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--signal-tint); -webkit-text-stroke:1.5px var(--signal); line-height:1; margin-bottom:1rem}
.step-card h3{font-size:1.15rem; margin-bottom:.5rem; text-transform:none}
.step-card p{color:var(--ink-soft); font-size:.92rem; line-height:1.6}

/* ── Feature grid ────────────────────────────────────────────────────── */
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
@media (max-width:960px){ .feat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .feat-grid{grid-template-columns:1fr} }
.feat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.5rem}
.feat-dot{width:9px; height:9px; border-radius:50%; background:var(--signal); margin-bottom:.9rem}
.feat-card h3{font-size:.98rem; text-transform:none; margin-bottom:.4rem; letter-spacing:0}
.feat-card p{color:var(--ink-soft); font-size:.87rem; line-height:1.55}

/* ── Dark band (analytics teaser etc.) ───────────────────────────────── */
.band-night{background:var(--night); color:var(--paper-on-night)}
.band-night .section-eyebrow{color:#FF7A6B}
.band-night h2{color:var(--paper-on-night)}
.band-night .section-sub{color:rgba(245,242,236,.68)}
.night-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
@media (max-width:900px){ .night-grid{grid-template-columns:1fr; gap:2rem} }
.mini-dash{background:var(--night-soft); border:1px solid var(--night-line); border-radius:var(--radius-lg); padding:1.5rem}
.mini-dash-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.1rem}
.mini-dash-total{font-family:var(--font-display); font-weight:800; font-size:2.1rem; color:var(--paper-on-night)}
.mini-bars{display:flex; align-items:flex-end; gap:5px; height:70px; margin-bottom:1.1rem}
.mini-bar{flex:1; background:linear-gradient(180deg, var(--signal), rgba(255,68,51,.35)); border-radius:3px 3px 0 0; opacity:.85}
.mini-rows{display:flex; flex-direction:column; gap:.55rem}
.mini-row{display:flex; align-items:center; gap:.7rem; font-size:.8rem; color:rgba(245,242,236,.7)}
.mini-row-bar{flex:1; height:6px; border-radius:4px; background:var(--night-line); overflow:hidden}
.mini-row-fill{height:100%; background:var(--signal); border-radius:4px}
.mini-row-val{font-family:var(--font-mono); width:34px; text-align:right; color:rgba(245,242,236,.9)}

/* ── SEO / body content ──────────────────────────────────────────────── */
.prose{max-width:720px; margin:0 auto}
.prose h2{font-size:1.55rem; text-transform:none; margin:2.4rem 0 1rem; letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-soft); margin-bottom:1.1rem; line-height:1.75; font-size:1rem}
.prose code{background:var(--paper-dim); padding:.15rem .4rem; border-radius:5px; font-family:var(--font-mono); font-size:.88em}
.prose ul, .prose ol{color:var(--ink-soft); line-height:1.8; margin:0 0 1.1rem; padding-left:1.3rem}
.prose li{margin-bottom:.35rem}
.prose a{color:var(--signal-dark); font-weight:600; text-decoration:underline}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:.7rem}
.faq-item{border:1px solid var(--line); border-radius:var(--radius-md); background:var(--card); overflow:hidden}
.faq-btn{width:100%; text-align:left; background:none; border:none; padding:1.1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--font-body); font-weight:700; font-size:.98rem; color:var(--ink); cursor:pointer}
.faq-arrow{flex-shrink:0; transition:transform .2s; color:var(--ink-faint)}
.faq-btn.open .faq-arrow{transform:rotate(180deg); color:var(--signal)}
.faq-body{padding:0 1.3rem 1.1rem; color:var(--ink-soft); font-size:.92rem; line-height:1.65; display:none}

/* ── Blog cards ──────────────────────────────────────────────────────── */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
@media (max-width:900px){ .blog-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr} }
.blog-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; text-decoration:none; transition:border-color .15s, transform .15s}
.blog-card:hover{border-color:var(--signal); transform:translateY(-2px)}
.blog-tag{font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--signal-dark)}
.blog-card h3{font-size:1.05rem; text-transform:none; letter-spacing:0; line-height:1.35; color:var(--ink)}
.blog-card p{color:var(--ink-soft); font-size:.86rem; line-height:1.55}
.blog-read{font-size:.83rem; font-weight:700; color:var(--signal-dark); margin-top:auto}

/* ── CTA band ────────────────────────────────────────────────────────── */
.cta-band{background:var(--ink); border-radius:var(--radius-lg); padding:3rem 2rem; text-align:center}
.cta-band h2{color:var(--paper); text-transform:uppercase; font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:.6rem}
.cta-band p{color:rgba(250,247,242,.65); margin-bottom:1.6rem}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer{background:var(--night); color:rgba(245,242,236,.7); padding:56px 0 0; margin-top:20px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:1.75rem} }
.footer-brand .brand{color:var(--paper-on-night)}
.footer-tag{font-size:.87rem; line-height:1.6; margin:.9rem 0 1rem; max-width:320px; color:rgba(245,242,236,.55)}
.footer-status{color:rgba(245,242,236,.4)}
.footer-head{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(245,242,236,.4); margin:0 0 .9rem}
.footer-col a{display:block; text-decoration:none; color:rgba(245,242,236,.68); font-size:.9rem; padding:.35rem 0}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid var(--night-line); padding:1.3rem 0 1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.78rem; color:rgba(245,242,236,.4)}

/* ── Utility page shells (legal/about/contact/404) ───────────────────── */
.page-hero{padding:56px 0 24px}
.page-hero h1{font-size:clamp(2.1rem,4vw,3rem); text-transform:uppercase}
.page-hero p{color:var(--ink-soft); margin-top:.8rem; font-size:1.02rem}
.legal-body{max-width:740px}
.legal-body h2{font-size:1.25rem; margin:2rem 0 .8rem}
.legal-body p, .legal-body li{color:var(--ink-soft); line-height:1.75; margin-bottom:.9rem}
.legal-body ul{padding-left:1.2rem}

/* ── Analytics page ──────────────────────────────────────────────────── */
.lookup-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow-card); max-width:560px; margin:0 auto}
.lookup-form-row{display:flex; gap:.6rem; margin-top:1.2rem}
@media (max-width:520px){ .lookup-form-row{flex-direction:column} }
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem}
@media (max-width:800px){ .stat-grid{grid-template-columns:repeat(2,1fr)} }
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.3rem}
.stat-num{font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1}
.stat-label{font-size:.78rem; color:var(--ink-faint); margin-top:.4rem}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.5rem; margin-bottom:1.25rem}
.panel h3{font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:1.1rem; font-family:var(--font-mono); font-weight:600}
.bar-row{display:flex; align-items:center; gap:.75rem; margin-bottom:.7rem; font-size:.86rem}
.bar-label{width:120px; flex-shrink:0; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{flex:1; height:8px; background:var(--paper-dim); border-radius:5px; overflow:hidden}
.bar-fill{height:100%; background:var(--signal); border-radius:5px}
.bar-val{width:38px; text-align:right; font-family:var(--font-mono); color:var(--ink-faint); font-size:.8rem}
.click-row{display:flex; align-items:center; gap:.8rem; padding:.65rem 0; border-bottom:1px solid var(--line-soft); font-size:.85rem}
.click-row:last-child{border-bottom:none}
.click-flag{font-size:1.1rem; width:22px; text-align:center}
.click-meta{color:var(--ink-faint); font-size:.8rem}
.click-time{margin-left:auto; font-family:var(--font-mono); color:var(--ink-faint); font-size:.78rem; white-space:nowrap}
.empty-state{text-align:center; padding:2.5rem 1rem; color:var(--ink-faint)}
.empty-state .icon{font-size:1.8rem; display:block; margin-bottom:.6rem}
.chart-svg{width:100%; height:140px}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
@media (max-width:760px){ .two-col{grid-template-columns:1fr} }

.badge-custom{background:var(--route-tint); color:var(--route); font-size:.68rem; font-weight:800; letter-spacing:.04em; padding:.2rem .55rem; border-radius:100px; text-transform:uppercase}