/* urlf.ly — 2011 design, faithful rebuild (2026 refresh). No tables, no sprites, no images except the logo.
   Palette sampled from the archived CSS + sprite (nspr.png) + main_bg.jpg. Responsive 320 → 1440+.
   WordPress: map the tokens below to theme.json (settings.color.palette); sections map to template parts (see README.md). */
:root{
  --bg-top:#2A8FC5; --bg-bot:#196098; --bg:#195F97;          /* main_bg.jpg gradient, 550px tall */
  --rule-hi:#60BFFF; --rule-lo:#0A4875;                       /* .mainhr */
  --yellow:#F3CA0E; --yellow-bd:#E59202;                      /* "What is" box */
  --sky:#75C5F6;   --sky-bd:#2791CE;                          /* "Why choose" box */
  --pill-1:#FFED52; --pill-2:#FEBA00; --pill-3:#FFA901;       /* orange sprite pill (outer frame / Join Now) */
  --pill-hover-2:#E99701; --pill-hover-3:#D08601;
  --blue-1:#75DCF4; --blue-2:#49A6F5; --blue-3:#3B8DDB;       /* blue SHRINK/LOGIN sprite */
  --join-ink:#775900; --join-shadow:#FFE15E;
  --ink:#111; --link:#0B5A8C; --navy:#083C60; --foot:#CFE8F8;
  --font:'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --font-head:Calibri,'Segoe UI','Lucida Grande',system-ui,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:#fefefe;font:400 16px/1.5 var(--font);
  background:var(--bg) linear-gradient(180deg,var(--bg-top) 0,var(--bg-bot) 560px) no-repeat}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page{max-width:940px;margin:0 auto;padding:10px 20px 24px}
.page.page-wide{max-width:1180px}

/* logo */
.logo{display:block;width:270px;margin:14px auto 4px}
.logo picture,.logo img{display:block;width:100%;height:auto;filter:none}

/* feature landing pages (/features/{slug}) reuse the features hero, card, and CTA styles */
.features-hero.fp-hero{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto;padding:40px 0 12px}
.features-hero.fp-hero h1{font-size:46px}
.fp-crumbs a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fp-plan{display:inline-block;margin:0 0 22px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16);font-size:15px;line-height:1.4}
.card.fp-body,.card.fp-related{max-width:760px;box-sizing:border-box}
.fp-body h2{margin-top:22px}
.fp-body h2:first-child{margin-top:0}
.fp-body h3{margin:16px 0 6px;font:700 16px/1.3 var(--font-head);color:#083C60}
.fp-body ol,.fp-body ul{margin:0 0 12px;padding-left:22px}
.fp-body li{margin:0 0 6px}
.fp-body pre{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#f3f7fa;font-size:14px}
.fp-body a,.fp-related a{color:var(--link)}
.fp-related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.fa-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(8,60,96,.35);text-underline-offset:3px}
@media (max-width:760px){.features-hero.fp-hero{padding-top:24px}.features-hero.fp-hero h1{font-size:32px}}
/* /pricing, /bitly-alternative, /api-docs reuse the same blocks */
.pr-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:760px;margin:12px auto 18px}
.pr-plans .card.pr-plan{max-width:none;margin:0;box-sizing:border-box}
.pr-price{margin:0 0 6px;font:700 28px/1.2 var(--font-head);color:#083C60}
.pr-price small{font-size:14px;font-weight:400;color:#3d6074}
.pr-note{color:#3d6074;font-size:14px}
.fp-body .table-wrap{margin:0 0 16px}
.fp-body table.data caption{text-align:left;font:700 15px/1.3 var(--font-head);color:#083C60;padding:4px 0 8px}
.fp-body table.data th[scope=row]{background:none;color:#09212D;white-space:normal;font-weight:600}
.fp-body table.data th[scope=row] a{color:var(--link)}
.fp-body table.data td{vertical-align:top}
.pr-table td{text-align:center;width:22%}
.pr-yes{color:#1b7f3b;font-weight:700}
.pr-no{color:#8aa3b3}
.fp-body .muted{color:#3d6074}
.fp-body code{font-size:13px;background:#f3f7fa;border-radius:6px;padding:1px 5px}
.fp-body pre code{padding:0;background:none}
.fp-body pre{overflow-x:auto}
@media (max-width:760px){.pr-plans{grid-template-columns:minmax(0,1fr)}}


/* homepage H1 (SEO): sits between the logo and the shrink bar */
.home-h1{margin:6px auto 0;max-width:760px;text-align:center;font:700 30px/1.15 var(--font-head);color:#fff;text-shadow:1px 2px 2px var(--navy)}
@media (max-width:760px){.home-h1{font-size:22px;padding:0 10px}}

/* shrink bar: orange pill frame > white input pill + blue SHRINK! pill; separate Join Now pill */
.bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;padding:16px 0}
.shrink{flex:0 1 640px;display:flex;align-items:center;gap:6px;min-width:0;padding:5px;border-radius:999px;
  background:linear-gradient(180deg,var(--pill-1) 0,var(--pill-2) 45%,var(--pill-3) 100%);
  box-shadow:0 2px 0 rgba(4,38,63,.28),0 8px 18px -8px rgba(4,38,63,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.shrink input[type=url]{flex:1;min-width:0;height:44px;padding:0 20px;border:0;outline:0;border-radius:999px;
  background:linear-gradient(180deg,#fff 0,#f1f1f1 100%);color:#775700;font:400 22px/44px var(--font);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.18)}
.shrink input::placeholder{color:rgba(119,89,0,.55)}
.shrink input:focus{box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 0 0 3px rgba(117,220,244,.9)}
.alias-row{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center;margin:0;max-width:640px}
.alias-row label{font-size:13px;font-weight:700;color:#fff;text-shadow:1px 1px 1px var(--navy)}
.alias-row input{flex:1 1 160px;min-width:0;max-width:280px;height:36px;padding:0 14px;border:0;border-radius:999px;background:linear-gradient(180deg,#fff,#eee);color:var(--navy);font:400 15px var(--font);box-shadow:inset 0 2px 3px rgba(0,0,0,.18)}
/* options row under the URL bar: alias + cloak toggle on one centered line, same width as the bar.
   Full-width flex item (padding centers the content in a 640px column) so it always wraps to its own centered row below the bar + Join Now. */
.opts-row{flex:1 0 100%;box-sizing:border-box;padding:0 max(0px,calc((100% - 640px)/2));display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:center}
.opts-row .alias-row{flex:0 1 auto;flex-wrap:nowrap;gap:10px;max-width:100%}
.opts-row .alias-row label{white-space:nowrap}
.opts-row .alias-row .hint{color:#e6f3fb;font-weight:400;text-shadow:1px 1px 1px var(--navy)}
.opts-row .alias-row input{flex:0 1 240px;width:240px}
.opts-row .opts-cloak{flex:0 0 auto;white-space:nowrap;font-size:13px;font-weight:700;color:#fff;text-shadow:1px 1px 1px var(--navy);cursor:pointer}
.opts-row .opts-cloak input{flex:none;width:16px;height:16px;margin:0;accent-color:#f5b800}
/* custom-name popup: hidden until a guest/free user tries the locked alias field */
.alias-row.alias-locked{position:relative}
.alias-pop{position:absolute;z-index:30;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(340px,86vw);box-sizing:border-box;padding:8px 30px 8px 12px;border-radius:12px;background:#fff;color:var(--navy);font-size:13px;line-height:1.35;font-weight:400;text-shadow:none;text-align:left;box-shadow:0 6px 18px rgba(4,38,63,.45)}
.alias-pop[hidden]{display:none}
.alias-pop::before{content:"";position:absolute;top:-6px;left:50%;margin-left:-6px;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
.alias-pop-x{position:absolute;top:2px;right:4px;width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--navy);font:400 20px/24px var(--font);cursor:pointer;padding:0}
.alias-pop-x:hover{background:#e6f3fb}
.btn-blue,.btn-join{cursor:pointer;border:0;font-family:var(--font);-webkit-user-select:none;user-select:none}
.btn-blue{height:44px;padding:0 24px;border-radius:999px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.04em;
  text-shadow:0 1px 1px rgba(8,60,96,.65);
  background:linear-gradient(180deg,var(--blue-1) 0,var(--blue-2) 14%,var(--blue-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 rgba(8,60,96,.35)}
.btn-blue:hover{filter:brightness(1.08)}
.btn-blue:active{filter:brightness(.94);transform:translateY(1px)}
.btn-join{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:16px;color:var(--join-ink);text-shadow:1px 1px 0 var(--join-shadow);white-space:nowrap;
  background:linear-gradient(180deg,var(--pill-1) 0,var(--pill-2) 45%,var(--pill-3) 100%);
  box-shadow:0 2px 0 rgba(4,38,63,.28),0 8px 18px -8px rgba(4,38,63,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-join:hover{background:linear-gradient(180deg,var(--pill-1) 0,var(--pill-hover-2) 45%,var(--pill-hover-3) 100%);text-shadow:1px 1px 0 #D6B224}
.btn-blue:focus-visible,.btn-join:focus-visible,.copy:focus-visible,.again:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* rules */
.hr{height:2px;border:0;margin:0;background:linear-gradient(180deg,var(--rule-hi) 0 1px,var(--rule-lo) 1px 2px);opacity:.75}

/* result state */
.result{margin:2px auto 20px;max-width:760px;padding:18px 22px;border-radius:18px;color:#09212D;text-align:left;
  background:linear-gradient(180deg,#fff 0,#e3edf3 100%);box-shadow:0 2px 0 rgba(4,38,63,.25),0 12px 26px -12px rgba(4,38,63,.6)}
.result h2{margin:0 0 10px;font:700 18px/1.2 var(--font-head);color:#B36B00;text-shadow:0 1px 0 #fff}
.result-row{display:flex;gap:10px;align-items:center}
.result-url{flex:1;min-width:0;padding:10px 16px;border-radius:12px;background:#fff;border:2px solid var(--sky);
  font:700 22px/1.2 var(--font);color:var(--link);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-url:hover{text-decoration:underline}
.copy{flex:none;height:46px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;font:700 14px var(--font);letter-spacing:.04em;color:var(--join-ink);
  text-shadow:1px 1px 0 var(--join-shadow);background:linear-gradient(180deg,var(--pill-1) 0,var(--pill-2) 45%,var(--pill-3) 100%);
  box-shadow:0 1px 0 rgba(4,38,63,.3),inset 0 1px 0 rgba(255,255,255,.55)}
.copy:hover{filter:brightness(.96)}
.copy[data-copied]{background:linear-gradient(180deg,#C9F7B5,#8FDB73);color:#17400a;text-shadow:none}
.result-meta{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:center;margin-top:12px;font-size:13px;color:#2b4a5c}
.result-meta .long{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.again{cursor:pointer;padding:5px 12px;border-radius:9px;font:700 12px var(--font);color:#393939;text-decoration:none;text-shadow:0 1px 0 #eee;
  background:linear-gradient(180deg,#e6e6e6,#cfcfcf)}
.again:hover{background:linear-gradient(180deg,#cfcfcf,#e6e6e6)}

/* intro boxes */
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:28px 0}
.box{padding:12px 22px 22px;border-radius:22px;border:4px solid;color:var(--ink);text-align:left;font-size:14px;line-height:2;
  box-shadow:0 2px 0 rgba(4,38,63,.25),0 14px 28px -14px rgba(4,38,63,.65)}
.box h2{margin:10px 0 8px;text-align:center;font:700 24px/1.2 var(--font-head)}
.box p{margin:0}
.box a{color:var(--link);text-decoration:none;font-weight:600}
.box a:hover{text-decoration:underline}
.box-yellow{background:linear-gradient(180deg,#F7D325 0,var(--yellow) 22%,var(--yellow) 100%);border-color:var(--yellow-bd)}
.box-sky{background:linear-gradient(180deg,#88D0FA 0,var(--sky) 22%,var(--sky) 100%);border-color:var(--sky-bd)}

/* login row */
.login{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start;padding:22px 8px;text-align:left}
.login-title{flex:0 0 250px}
.login h3{margin:0;font:700 19px/1.3 var(--font);text-shadow:1px 2px 3px var(--navy)}
.login .forgot{display:inline-block;margin-top:6px;font-size:12px;color:#fff;text-decoration:none;text-shadow:1px 1px 1px var(--navy)}
.login .forgot:hover{text-decoration:underline}
.login-fields{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
.login-fields input[type=email],.login-fields input[type=password]{flex:1 1 170px;min-width:0;height:38px;padding:0 16px;border:0;outline:0;border-radius:999px;
  background:linear-gradient(180deg,#fff,#eee);color:var(--navy);font:400 15px var(--font);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.25)}
.login-fields input:focus{box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 0 0 3px rgba(117,220,244,.9)}
.login-fields .btn-blue{height:38px;padding:0 24px}
.remember{flex:1 0 100%;display:flex;gap:7px;align-items:center;font-size:12px;text-shadow:1px 1px 1px var(--navy)}

/* footer */
.footer{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:center;padding-top:14px;font-size:13px;color:var(--foot)}
.footer nav{display:flex;flex-wrap:wrap}
.footer a{color:var(--foot);text-decoration:none;padding:2px 9px;border-left:1px solid rgba(207,232,248,.45)}
.footer a:first-child{border-left:0}
.footer a:hover{color:#fff;text-decoration:underline}

@media (max-width:760px){
  .page{padding:6px 16px 22px}
  .logo{width:200px}
  .bar{flex-direction:column;gap:12px;padding:12px 0}
  .shrink{flex:1 1 auto;width:100%}
  .shrink input[type=url]{font-size:18px;padding:0 16px}
  .btn-blue{padding:0 18px}
  .opts-row{width:100%}
  .btn-join{width:100%;max-width:360px}
  .bar>.btn-join{order:5}
  .boxes{grid-template-columns:1fr;gap:20px;padding:20px 0}
  .box{padding:8px 18px 18px;line-height:1.9}
  .result{padding:16px}
  .result-row{flex-direction:column;align-items:stretch}
  .result-url{font-size:19px;text-align:center}
  .copy{height:48px}
  .login{padding:18px 0}
  .login-title{flex:1 0 100%}
  .login-fields .btn-blue{flex:1 0 100%;height:44px}
  .footer{flex-direction:column;align-items:flex-start;gap:10px}
  .footer nav{gap:2px 0}
}
@media (max-width:400px){ .shrink input[type=url]{font-size:16px} .alias-row{justify-content:stretch} .alias-row input{max-width:none;font-size:16px} .opts-row .alias-row input{width:auto;flex:1 1 0} .btn-blue{font-size:12px;padding:0 14px} }
@media (prefers-reduced-motion:no-preference){ .btn-blue,.btn-join,.copy{transition:filter .12s,transform .06s} }

/* --- app chrome: alerts, auth cards, CMS, interstitial, tables (later phases) --- */
.alert{margin:12px 0;padding:10px 14px;border-radius:12px;color:#09212D;background:#fff;border:2px solid var(--sky)}
.alert p{margin:0 0 8px}
.alert p:last-child{margin-bottom:0}
.paynow-inline{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 12px}
.paynow-inline label{font-weight:700;color:#fff;text-shadow:1px 1px 1px var(--navy)}
.paynow-inline input{width:8em;height:36px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:var(--navy);font:400 15px var(--font)}
.paynow-inline .hint{color:#fff;text-shadow:1px 1px 1px var(--navy)}
.alert-error{background:#F7D325;border-color:var(--yellow-bd)}
.alert-ok{background:#e7f6ea;border-color:#2e7d32}
.alert-warn{background:#fff6d8;border-color:var(--yellow-bd)}
.alert a,.linkish{color:var(--navy);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.inline{display:inline}

.card{margin:16px auto;max-width:640px;padding:18px 22px 22px;border-radius:18px;color:#09212D;text-align:left;
  background:linear-gradient(180deg,#fff 0,#e3edf3 100%);box-shadow:0 2px 0 rgba(4,38,63,.25),0 12px 26px -12px rgba(4,38,63,.6)}
.card h1,.card h2{margin:0 0 10px;font:700 22px/1.2 var(--font-head);color:#B36B00;text-shadow:0 1px 0 #fff}
.card p{margin:0 0 10px}
.card-danger{border:3px solid #c4483a}
.stack{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.stack label,.card label{font-weight:700;font-size:14px;color:#083C60}
.hint{font-weight:400;color:#3d6074}
.stack input,.stack textarea,.card input[type=email],.card input[type=password],.card input[type=text],.card input[type=url],.card input[type=number],.card input:not([type]),.card textarea{
  width:100%;height:42px;padding:0 14px;border:0;border-radius:999px;background:linear-gradient(180deg,#fff,#eee);color:var(--navy);
  font:400 15px var(--font);box-shadow:inset 0 2px 3px rgba(0,0,0,.18)}
.stack textarea,.card textarea{height:auto;padding:10px 14px;border-radius:16px}
.stack input:focus,.stack textarea:focus,.card input:focus,.card textarea:focus{outline:0;box-shadow:inset 0 2px 3px rgba(0,0,0,.18),0 0 0 3px rgba(117,220,244,.9)}
.stack input:disabled,.stack input[readonly],.card input:disabled,.card input[readonly]{opacity:.72;cursor:not-allowed}
.stack .btn-blue,.btn-link{align-self:flex-start;margin-top:8px;text-decoration:none;display:inline-flex;align-items:center}
.check{display:flex;gap:8px;align-items:center;font-weight:400;font-size:14px}
.check input{width:auto;height:auto;box-shadow:none}
.fine{margin-top:12px;font-size:14px}
.fine a{color:var(--link);font-weight:700}
.pill{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#e7f6ea;color:#17400a;font-size:12px;font-weight:700}
.pill-warn{background:#fff6d8;color:#775900}
.btn-danger{height:42px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font-weight:700;color:#fff;background:#b4332a}
.btn-danger:focus-visible{outline:3px solid #fff;outline-offset:2px}
.captcha{margin:8px 0}
.prose h2{font-size:18px;color:#083C60;text-shadow:none}
.cms-body a{color:var(--link)}
.logout-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 0}
.logout-row p{margin:0}
.shrink-note{margin:0;color:#fff;text-shadow:1px 1px 1px var(--navy)}
.shrink{flex-wrap:wrap}
.captcha-slot{flex:1 0 100%;padding:4px 8px 2px}

/* interstitial — frame-bar brand on the home palette */
.bare{min-height:100vh}
.inter{max-width:640px;margin:0 auto;padding:28px 16px 48px;text-align:center}
.inter-brand{display:flex;align-items:center;justify-content:center;margin:4px auto 18px}
.inter-logo{display:block;width:min(420px,86vw)}
.inter-logo img{display:block;width:100%;height:auto;filter:none} /* shadow is baked into the logo; a CSS drop-shadow haloes in WebKit */
.inter-card{padding:26px 22px 22px;border-radius:22px;color:#09212D;background:linear-gradient(180deg,#fffef6 0,#fff 18%,#e7f3fa 100%);
  border:4px solid var(--yellow-bd);box-shadow:0 2px 0 rgba(4,38,63,.25),0 16px 28px -12px rgba(4,38,63,.65)}
.inter-card h1{margin:0 0 8px;font:700 28px/1.25 var(--font-head);color:#B36B00;text-shadow:0 1px 0 #fff}
.inter-sub{margin:0 0 8px;color:#2b4a5c}
.inter-count{margin:6px 0 4px;font-weight:700;font-size:18px;color:var(--navy)}
.inter-dest{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px auto;max-width:100%;padding:8px 14px;border-radius:999px;
  background:rgba(6,40,66,.08);font-size:13px;color:#2b4a5c}
.inter-dest span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inter-dest .lock{width:16px;height:16px;flex:none;color:#0B5A8C}
.inter-go{margin-top:6px}
.inter .fine a{color:var(--link)}
html:has(.uf-frame),html:has(.uf-frame) body{margin:0;height:100%;overflow:hidden;background:#fff}
.frame-page{background:#fff}

/* account nav */
.topnav{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:flex-end;padding:8px 0 0}
.topnav a,.topnav button{color:#fff;background:none;border:0;padding:4px 2px;font:700 13px var(--font);text-decoration:none;cursor:pointer;text-shadow:1px 1px 1px var(--navy)}
.topnav a:hover,.topnav button:hover{text-decoration:underline}
.topnav form{margin:0}
/* logged-out 'Premium Features' link: the site's yellow pill button, centered text, no underline, one line */
.topnav a.btn-join{background:linear-gradient(180deg,var(--pill-1) 0,var(--pill-2) 45%,var(--pill-3) 100%);box-shadow:0 2px 0 rgba(4,38,63,.28),0 6px 14px -8px rgba(4,38,63,.55),inset 0 1px 0 rgba(255,255,255,.55);padding:0 18px;height:36px;color:var(--join-ink);text-shadow:1px 1px 0 var(--join-shadow);text-decoration:none;white-space:nowrap;text-align:center}
.topnav a.btn-join:hover{text-decoration:none}
.topnav a:focus-visible,.topnav button:focus-visible{outline:3px solid #fff;outline-offset:2px}

.screen-title{margin:8px 0 4px;font:700 28px/1.2 var(--font-head);text-shadow:1px 2px 3px var(--navy)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:12px 0}
.cards-tight{margin-top:14px}
.stat{padding:12px 16px;border-radius:18px;border:4px solid var(--yellow-bd);color:var(--ink);text-align:center}
.stat.box-yellow{border-color:var(--yellow-bd)}
.stat.box-sky{border-color:var(--sky-bd)}
.stat h2{margin:0;font:700 14px var(--font-head);color:var(--navy);text-shadow:none}
.stat p{margin:4px 0 0;font:700 28px/1.1 var(--font-head);color:#09212D}
.card-wide{max-width:none}
/* API docs: long curl examples must wrap inside 1280 viewport */
.card-wide pre,.card pre{overflow-x:auto;white-space:pre-wrap;max-width:100%}
.card-wide pre code,.card pre code{white-space:inherit;word-break:break-word}
code.api-key{display:block;overflow-x:auto;white-space:pre-wrap;max-width:100%;word-break:break-all}
.plan-features{margin:8px 0 0;padding-left:1.2em}
.plan-features li{margin:4px 0}
.plan-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plan-choice{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:3px solid var(--sky-bd);border-radius:16px;background:#fff;color:#09212D;cursor:pointer}
.plan-choice:has(input:checked),.plan-choice:focus-within{border-color:var(--yellow-bd);background:#fffbeb}
.plan-choice input{width:18px;height:18px;margin:0 0 6px;accent-color:var(--navy)}
.plan-choice-name{font:700 15px var(--font-head);color:var(--navy)}
.plan-choice-price{font:700 22px/1.2 var(--font-head);color:#09212D}
.plan-choice-note{font-size:13px;color:#2b4a5c}
.plan-choice input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@media (max-width:520px){.plan-choices{grid-template-columns:1fr}}
/* /plan only. These selectors start at #plan-status or #plan-unavailable, so
   other pages keep the dark .hint (#3d6074) used on white cards.
   The page background is the site blue (#195F97, #196098, #2A8FC5).
   #ffffff on #195F97 is about 8.1:1; #fffef8 on the same blue is about 8:1.
   Both clear WCAG AA (4.5:1) for normal text. */
#plan-status ~ p.hint,
#plan-status ~ .plan-off-hint{color:#fffef8;text-shadow:1px 1px 1px #04263f}
#plan-unavailable{color:#09212D;background:#fff}
#plan-unavailable h2{color:#8a5200}
#plan-unavailable .plan-unavailable-text,
#plan-unavailable p{color:#09212D}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.filters input,.filters select,select{
  height:40px;padding:0 12px;border:2px solid var(--sky-bd);border-radius:999px;
  background:#fff;color:var(--navy);font:400 14px var(--font);
  box-shadow:none;width:auto;max-width:280px}
.filters input{min-width:0;flex:1 1 140px}
.filters input[type=checkbox]{width:auto;height:auto;flex:none;max-width:none;border:0;padding:0}
.filters input:focus,.filters select:focus,select:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(117,220,244,.7)}
.btn-small{height:40px;padding:0 16px;font-size:13px;text-decoration:none}
.btn-blue.btn-small,.btn-join.btn-small{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;padding:0 18px;font-size:13px;line-height:1;letter-spacing:.04em;white-space:nowrap;text-decoration:none}
.btn-join.btn-small{width:auto;max-width:none}
.bulk-row{align-items:center}
#account-ga{scroll-margin-top:16px}
.table-wrap{overflow-x:auto;max-width:100%}
table.data{width:100%;border-collapse:collapse;background:#fff;color:#09212D;border-radius:12px}
table.data.fit{table-layout:fixed}
table.data th,table.data td{padding:8px 8px;border-bottom:1px solid #d5e4ee;text-align:left;font-size:13px;vertical-align:middle;overflow:hidden}
table.data th{background:#083C60;color:#fff;white-space:nowrap}
table.data th a{color:#fff;text-decoration:none}
table.data th a:hover{text-decoration:underline}
table.data a{color:var(--link);font-weight:700}
.clip,.col-dest{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-mini{height:28px;padding:0 10px;margin-left:6px;font-size:11px}
table.data.fit .col-check{width:36px}
table.data.fit .col-code{width:88px}
table.data.fit .col-dest{width:auto}
table.data.fit .col-owner{width:16%}
table.data.fit .col-status{width:72px}
table.data.fit .col-clicks{width:56px}
table.data.fit .col-when{width:104px}
table.data.fit .col-actions{width:248px;white-space:nowrap}
table.data.fit td.col-actions{overflow:hidden}
.row-actions{display:flex;flex-wrap:nowrap;gap:3px;align-items:center;white-space:nowrap;max-width:100%;overflow:hidden}
.row-actions form{margin:0;display:inline-flex}
.row-actions .linkish,.row-actions a{color:var(--link);font-weight:700;font-size:11px;line-height:1.2;text-decoration:none;padding:3px 5px;border-radius:999px;background:#e8f4fb;white-space:nowrap;border:0;border-bottom:0}
.row-actions .danger{color:#9a2b22;background:#fdeceb}
.card-wide .table-wrap{overflow:hidden}
table.data a{text-decoration:none}
table.data a:hover{text-decoration:underline}
table.data .row-actions a,table.data .row-actions a:hover,table.data .row-actions .linkish,table.data .row-actions .linkish:hover{text-decoration:none;background:#e8f4fb}
table.data .row-actions a:hover,table.data .row-actions .linkish:hover{background:#d3ebf8}
table.data .row-actions .danger,table.data .row-actions .danger:hover{color:#9a2b22;background:#fdeceb}
.bulk-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.features-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:0}
.features-cta .btn-join,.features-cta .btn-blue{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;line-height:1;white-space:nowrap}
/* Features page: hero, sticky category nav, card grid, bottom CTA */
/* Features page */
.eyebrow{margin:0 0 10px;font:700 13px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--foot)}
.features-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:56px 8px 48px;color:#fff}
.features-hero h1{margin:0 0 16px;font:700 54px/1.05 var(--font-head);letter-spacing:-.01em;text-shadow:1px 2px 2px var(--navy)}
.features-intro{margin:0 0 28px;max-width:52ch;font-size:19px;line-height:1.6;text-shadow:1px 1px 1px rgba(4,38,63,.5)}
.features-hero .features-cta{justify-content:flex-start;gap:12px}
.hero-card{padding:22px 24px 20px;border-radius:22px;background:#fff;color:var(--navy);box-shadow:0 30px 50px -24px rgba(4,38,63,.75),0 0 0 6px rgba(255,255,255,.18)}
.hero-card-top{display:flex;align-items:center;gap:10px;font-size:22px}
.hero-dot{width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px #fdf1b0}
.hero-ex{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#3d6074;background:#eef6fc;border:1px solid #cfe3f1;border-radius:999px;padding:2px 8px}
.hero-dest{margin:6px 0 14px 22px;font-size:14px;color:#3d6074}
.hero-spark{display:block;width:100%;height:110px}
.hero-spark .area,.mock-chart .area{fill:#cfe8fa}
.hero-spark .line,.mock-chart .line{fill:none;stroke:#2791CE;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:12px;background:#eef6fc;border:1px solid #cfe3f1}
.chip small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#3d6074}
.chip b{font-size:17px}
.hl{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 8px;color:#fff}
.hl-rev .hl-visual{order:2}
.hl h2{margin:0 0 14px;font:700 36px/1.15 var(--font-head);text-shadow:1px 1px 1px var(--navy)}
.hl-copy{margin:0 0 20px;font-size:18px;line-height:1.6;max-width:46ch}
.hl-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hl-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45}
.hl-check{flex:none;margin-top:1px;padding:3px;box-sizing:content-box;width:14px;height:14px;border-radius:50%;background:var(--yellow);color:var(--join-ink)}
.hl-card{padding:26px;border-radius:24px;background:#fff;color:var(--navy);box-shadow:0 30px 50px -26px rgba(4,38,63,.75),0 0 0 6px rgba(255,255,255,.18)}
.mock-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.mock-chips span{padding:6px 12px;border-radius:999px;background:#eef6fc;border:1px solid #cfe3f1;font-size:13px;font-weight:700}
.hl-brand{text-align:center}
.mock-url{padding:14px 16px;border-radius:14px;background:#eef6fc;border:1px solid #cfe3f1;font-size:14px}
.mock-long span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#5d7380}
.mock-short{background:var(--yellow);border-color:var(--yellow-bd);font-size:22px;color:var(--join-ink)}
.mock-arrow{display:block;margin:10px auto;color:#2791CE}
.mock-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mock-tabs span{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;color:#3d6074;background:#eef6fc}
.mock-tabs .on{background:var(--navy);color:#fff}
.mock-chart{display:block;width:100%;height:170px}
.mock-chart .grid{stroke:#dbe8f1;stroke-width:1;vector-effect:non-scaling-stroke}
.mock-chart .dot{fill:#fff;stroke:#2791CE;stroke-width:3}
.mock-bars{display:grid;gap:8px;margin-top:14px}
.mock-bars span{display:block;height:10px;border-radius:6px;background:#75C5F6}
.mock-bars .b1{width:90%}.mock-bars .b2{width:62%;background:#2791CE}.mock-bars .b3{width:35%;background:#0B5A8C}
.hl-qr{text-align:center}
.mock-qr{display:block;width:min(240px,100%);margin:0 auto;fill:var(--navy)}
.mock-qr .logo-bg{fill:var(--yellow);stroke:#fff;stroke-width:1}
.hl-controls{display:grid;gap:10px}
.mock-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:#eef6fc;border:1px solid #cfe3f1;font-weight:700}
.mock-row svg{flex:none;color:#2791CE}
.mock-row span{flex:1}
.mock-row i{font-style:normal;padding:3px 12px;border-radius:999px;background:#fff;border:1px solid #cfe3f1;font-size:14px}
.hl-teams{text-align:center}
.mock-people{display:flex;justify-content:center;margin-bottom:18px}
.av{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-left:-10px;border-radius:50%;border:3px solid #fff;font-weight:700;color:#fff;background:#2791CE}
.av:first-child{margin-left:0}
.av.a2{background:#0B5A8C}.av.a3{background:var(--yellow-bd)}.av.more{background:#eef6fc;color:var(--navy)}
.mock-code{padding:14px 16px;border-radius:14px;background:var(--navy);color:#cfe8fa;font:14px/1.7 ui-monospace,Menlo,Consolas,monospace;text-align:left}
.mock-code .k{color:var(--yellow);font-weight:700}
.mock-code .m{color:#9dd4f7}
.features-all{padding:56px 8px 24px;color:#fff}
.features-all h2{margin:0 0 28px;font:700 36px/1.15 var(--font-head);text-shadow:1px 1px 1px var(--navy)}
.fa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.fa-group:first-child{grid-column:span 2}
.fa-group:first-child ul{column-count:2;column-gap:32px}
.fa-group:first-child li{break-inside:avoid}
@media (min-width:901px){
  .fa-solo .fa-group{grid-column:1/-1}
  /* (n-2)%3==1: widen the first card of row 2 and the last card, so every row holds 3 columns. */
  .fa-d1 .fa-group:nth-child(3),.fa-d1 .fa-group:last-child,.fa-d2 .fa-group:last-child{grid-column:span 2}
  .fa-d1 .fa-group:nth-child(3):last-child{grid-column:1/-1}
  .fa-d1 .fa-group:nth-child(3) ul,.fa-d1 .fa-group:last-child ul,.fa-d2 .fa-group:last-child ul{column-count:2;column-gap:32px}
  .fa-d1 .fa-group li,.fa-d2 .fa-group li{break-inside:avoid}
}
@media (min-width:601px) and (max-width:900px){
  .fa-t1 .fa-group:last-child{grid-column:1/-1}
  .fa-t1 .fa-group:last-child ul{column-count:2;column-gap:32px}
  .fa-t1 .fa-group:last-child li{break-inside:avoid}
}
.fa-group{margin:0;padding:8px 22px 18px;border-radius:20px;background:#fff;color:var(--navy);box-shadow:0 14px 28px -18px rgba(4,38,63,.7)}
.fa-group summary{display:flex;align-items:center;gap:12px;padding:14px 0 10px;cursor:pointer;list-style:none;font:700 18px/1.25 var(--font-head)}
.fa-group summary::-webkit-details-marker{display:none}
.fa-group summary:focus-visible{outline:3px solid #2791CE;outline-offset:2px;border-radius:8px}
.fa-group summary::after{content:"";margin-left:auto;width:8px;height:8px;border:solid #5d7380;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.fa-group[open] summary::after{transform:rotate(-135deg)}
.fa-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:11px;background:var(--yellow);color:var(--join-ink)}
.fa-group ul{list-style:none;margin:0;padding:6px 0 0;border-top:1px solid #dbe8f1}
.fa-group li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;font-size:15px;line-height:1.35;border-bottom:1px solid #eef3f7}
.fa-group li:last-child{border-bottom:0}
.fa-group .pill{margin:0;padding:2px 9px;background:var(--yellow);color:var(--join-ink);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.features-bottom{margin:48px 0 16px;padding:56px 24px;text-align:center;border-radius:28px;background:linear-gradient(180deg,#fff,#dcecf8);color:var(--navy);box-shadow:0 30px 50px -28px rgba(4,38,63,.7)}
.features-bottom h2{margin:0 0 10px;font:700 40px/1.15 var(--font-head)}
.features-bottom p{margin:0 0 24px;font-size:18px}
.features-bottom p.features-cta{margin:0}
@media (max-width:900px){
  .features-hero,.hl{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:40px;padding-bottom:40px}
  .hl-rev .hl-visual{order:0}
  .features-hero h1{font-size:42px}
  .fa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fa-group:first-child{grid-column:1/-1}
}
@media (max-width:600px){
  .features-hero h1{font-size:34px}
  .features-intro{font-size:17px}
  .hl h2,.features-all h2{font-size:28px}
  .features-bottom h2{font-size:30px}
  .features-bottom{padding:40px 18px}
  .fa-grid{grid-template-columns:minmax(0,1fr)}
  .fa-group:first-child ul{column-count:1}
  .hl-card{padding:18px}
  .hero-card{padding:18px}
  .hero-card-top{font-size:19px}
}
.cloak-note{margin:0}
html.cloak-html,html.cloak-html body{margin:0;height:100%;overflow:hidden;background:#fff}
.cloak-frame{position:fixed;inset:0;width:100vw;height:100vh;border:0;margin:0;display:block;background:#fff}
.qr-preview{display:inline-block;max-width:100%;padding:10px;background:#fff;border-radius:12px;border:2px solid #d5e4ee;line-height:0}
.qr-preview svg{display:block;width:min(220px,100%);height:auto}
.result-qr{margin-top:14px}
.result-qr .hint{color:#3d6074}
.qr-downloads{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qr-options input[type=number]{width:5.5em;flex:0 0 auto}
.stat-sub{margin:4px 0 0;font-size:13px;font-weight:600;color:#3d6074}
.pager{display:flex;gap:12px;align-items:center;margin:12px 0}
.pager a{color:var(--link);font-weight:700}
.muted{color:#3d6074}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bars{list-style:none;margin:0;padding:0}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:8px;align-items:center;margin:6px 0;font-size:13px}
.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-n{font-weight:700;color:var(--navy)}
.bar-bg{fill:#d5e8f4}
.bar-fg{fill:#3B8DDB}
.chart{width:100%;height:auto;display:block}
.chart-bar{fill:#3B8DDB}
.chart-axis{stroke:#8fb4c9;stroke-width:1}
.chart-label{fill:#083C60;font-size:10px}
.chart-empty{fill:#3d6074;font-size:14px}
.stats-url{margin:8px 0}
#qr svg{width:min(240px,100%);height:auto;background:#fff;border-radius:12px}

/* admin */
.admin-nav{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.admin-nav a{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;text-decoration:none;font:700 13px var(--font);text-shadow:1px 1px 1px var(--navy)}
.admin-nav a[aria-current="page"]{background:#fff;color:var(--navy);text-shadow:none}
.admin-nav a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.tabs a{padding:5px 10px;border-radius:999px;background:rgba(8,60,96,.25);color:#fff;text-decoration:none;font:700 13px var(--font)}
.tabs a[aria-current="page"]{background:var(--yellow);color:var(--navy)}
.save-bar{margin:0 0 12px;display:flex}
.save-bar .btn-blue{margin:0}
.card .save-bar{margin-bottom:12px}
.setting{padding:10px 0;border-bottom:1px solid #d5e4ee}
.setting-bad{background:#fff6d8;border-radius:12px;padding:10px}
.setting-key{margin:4px 0 0;font-size:12px}
.setting-key code{color:#3d6074}
.field-error{margin:4px 0 0;color:#9a2b22;font-weight:700}
.settings-form select,.settings-form input[type=text],.settings-form input[type=password],.settings-form input[type=number]{max-width:520px}
.link-extras{margin:12px 0;border:2px solid var(--sky);border-radius:14px;background:#fff;color:var(--navy);overflow:hidden}
.link-extras summary{cursor:pointer;font-weight:700;padding:12px 16px;background:#eaf5fd;list-style:none;display:flex;align-items:center;gap:8px}
.link-extras summary::-webkit-details-marker{display:none}
.link-extras summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg);transition:transform .15s}
.link-extras[open] summary::before{transform:rotate(45deg)}
.link-extras[open] summary{border-bottom:2px solid var(--sky)}
.link-extras summary:focus{outline:none}
.link-extras summary:focus-visible{outline:3px solid var(--navy);outline-offset:-5px}
.link-extras-body{display:flex;flex-direction:column;gap:8px;padding:18px 16px;min-width:0}
.link-extras-body > label{margin-top:6px}
.link-extras-body > label:first-child{margin-top:0}
.link-extras-body > .hint{margin:0 0 6px}
.link-extras-body input,.link-extras-body select{width:100%;max-width:100%;box-sizing:border-box;min-width:0}
.link-extras-body input[type=checkbox]{width:auto;max-width:none;flex:none;box-shadow:none}
.link-extras-body .hint{overflow-wrap:anywhere}
.opts-row + .link-extras,.bar > .link-extras{flex:1 0 100%;box-sizing:border-box;max-width:640px;margin:0 auto;text-align:left}
.bar > .link-extras summary{color:var(--navy)}
.setting-block{margin:8px 0 16px;padding:12px 14px;border:2px solid var(--sky);border-radius:14px}
.setting-block h2{margin:0 0 6px;font-size:18px}
.reset-row{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px}
.reset-row form{margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 16px;margin:0}
.facts div{margin:0}
.facts dt{font-size:12px;font-weight:700;color:var(--navy)}
.facts dd{margin:0}
.admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin:12px 0}
.admin-grid-1{grid-template-columns:1fr}
.admin-grid .card{max-width:none;width:auto;margin:0}
.chart-ymax{font-size:11px}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid #e3eef4}
.logo-preview{max-width:280px;height:auto;background:#fff;border-radius:12px}
.page-note{color:#fff;text-shadow:1px 1px 1px var(--navy)}

@media (max-width:760px){
  .card{padding:14px}
  .stack .btn-blue,.btn-link,.btn-danger{width:100%;justify-content:center}
  .save-bar{justify-content:center}
  .save-bar .btn-blue{width:100%}
  .inter{padding:16px 12px 32px}
  .inter-logo{width:min(260px,78vw)}
  .inter-card h1{font-size:22px}
  .inter-card{padding:18px 14px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cards .stat{padding:8px 6px;border-width:3px;border-radius:14px}
  .cards .stat h2{font-size:11px;line-height:1.2}
  .cards .stat p{font-size:18px}
  .stat-sub{font-size:11px;line-height:1.3}
  .qr-options{align-items:flex-end}
  .qr-options input[type=text]{flex:1 1 8em;min-width:0;max-width:9em}
  .qr-options label{flex:0 0 auto}
  .split,.admin-grid{grid-template-columns:1fr}
  .topnav{justify-content:flex-start}
  .bars li{grid-template-columns:1fr auto}
  .bar-svg{display:none}
  .page{overflow-x:hidden}
  .table-wrap{overflow-x:visible}
  table.data thead{display:block;height:0;overflow:hidden;border:0;visibility:hidden}
  table.data,table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{margin:0 0 12px;padding:8px 10px;border:2px solid #d5e4ee;border-radius:14px;background:#fff}
  table.data td{border:0;padding:4px 0;white-space:normal;max-width:none;width:auto;overflow:visible}
  table.data td.col-dest,.clip{max-width:none;width:auto;white-space:normal;overflow:visible;text-overflow:clip;word-break:break-all}
  table.data td.col-actions,table.data .col-actions{width:auto;max-width:none;white-space:normal}
  table.data td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;color:var(--navy);letter-spacing:.02em}
table.data td.col-actions[data-label]::before{margin-bottom:4px}
  table.data td.col-check[data-label]::before{display:inline;margin-right:8px}
  .row-actions{display:flex;flex-wrap:wrap;gap:6px}
}

/* language switcher (footer) */
.footer .lang a[aria-current]{color:#fff;font-weight:700;text-decoration:underline}

/* --- Google sign-in --- */
.or-divider{display:flex;align-items:center;gap:12px;margin:14px 0 10px;color:#3d6074;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:rgba(8,60,96,.25)}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:40px;padding:0 18px;border:1px solid #747775;border-radius:999px;
  background:#fff;color:#1f1f1f;font:500 15px/1 var(--font);text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn-google:hover{background:#f8faff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.btn-google:focus-visible{outline:3px solid #75DCF4;outline-offset:2px}
.btn-google svg{width:20px;height:20px;max-width:20px;max-height:20px;flex:none;display:block}
.or-divider + .btn-google{margin-bottom:14px}
.login-fields .btn-google{width:auto;flex:1 0 100%;max-width:300px}
.copy-row{display:flex;gap:10px;align-items:center;margin:6px 0 12px}
.copy-row input{flex:1;min-width:0}
.copy-row .btn-blue{flex:none}
.steps{margin:0 0 8px;padding-left:22px}
.steps li{margin:0 0 6px}
.card-wide .pill{margin-left:0}
@media (max-width:520px){.copy-row{flex-direction:column;align-items:stretch}}

/* ad preview (review page) and ad form */
.ad-preview{max-width:560px;margin:8px 0 14px;padding:14px 18px;border-radius:16px;border:3px solid var(--navy);background:#fff}
.ad-preview .ad-banner img{display:block;max-width:100%;height:auto;border-radius:10px}
.ad-preview .ad-title{margin:0 0 4px;font-size:20px}
.ad-preview .ad-body{margin:0 0 10px}
.ad-preview .ad-cta{display:inline-block;padding:8px 18px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;font-weight:700}
.ad-preview .ad-host{margin:8px 0 0;font-size:12px;color:#3d6074}
fieldset{border:0;margin:0;padding:0}
legend{font-weight:700;color:var(--navy);padding:0}
.amt-pos{color:#17400a;font-weight:700}
.amt-neg{color:#9a2b22;font-weight:700}
#adj-confirm-wrap[hidden]{display:none}

/* urlf.ly info cards — OPTION B "glossy brand"  (scoped: .ufb-info)
   Yellow + sky fills kept, but built like the site's embossed pill buttons: gloss band on top, inner highlight,
   soft border, navy icon badge, white "input-style" chip. Replace <div class="boxes"> with option-b-snippet.html. */
.ufb-info{
  --b-navy:#083C60; --b-ink-y:#2E2200; --b-ink-s:#062F4D;
  --b-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:28px 0;font-family:var(--b-font);text-align:left}
.ufb-info *,.ufb-info *::before,.ufb-info *::after{box-sizing:border-box}

.ufb-card{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  padding:30px 30px 28px;border-radius:26px;border:1px solid var(--b-edge)}
/* gloss band (same trick as the pill buttons) */
.ufb-card::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.14) 100%);border-radius:26px 26px 60% 60%/26px 26px 24px 24px}
.ufb-card--what{--b-edge:rgba(229,146,2,.55);color:var(--b-ink-y);
  background:linear-gradient(180deg,#FFED52 0,#F7D325 38%,#F3CA0E 70%,#EDB90A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 0 rgba(168,102,0,.22),0 2px 0 rgba(4,38,63,.28),0 20px 34px -16px rgba(4,38,63,.7)}
.ufb-card--why{--b-edge:rgba(39,145,206,.6);color:var(--b-ink-s);
  background:linear-gradient(180deg,#B4E3FC 0,#8DD0F8 38%,#75C5F6 70%,#62B6EA 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 0 rgba(10,72,117,.22),0 2px 0 rgba(4,38,63,.28),0 20px 34px -16px rgba(4,38,63,.7)}

.ufb-head{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.ufb-badge{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:#fff;
  background:linear-gradient(180deg,#1C6FA8 0,#083C60 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.55),0 6px 12px -4px rgba(4,38,63,.6)}
.ufb-badge svg{width:28px;height:28px;display:block}
.ufb-kicker{display:block;margin:0 0 2px;font:700 12px/1.2 var(--b-font);letter-spacing:.14em;text-transform:uppercase}
.ufb-card--what .ufb-kicker{color:#4F3600}.ufb-card--why .ufb-kicker{color:#083C60}
.ufb-title{margin:0;font:700 27px/1.15 var(--b-font);letter-spacing:-.01em;text-shadow:0 1px 0 rgba(255,255,255,.55)}

.ufb-body{margin:0 0 16px;font-size:16px;line-height:1.6}
.ufb-list{list-style:none;margin:0;padding:0}
.ufb-list li{display:flex;align-items:flex-start;gap:12px;padding:6px 0;font-size:16px;line-height:1.5;font-weight:500}
.ufb-list li+li{border-top:1px solid rgba(8,60,96,.16);box-shadow:0 -1px 0 rgba(255,255,255,.35)}
.ufb-list li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:#083C60 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 rgba(255,255,255,.5)}

.ufb-foot{margin-top:auto;padding-top:18px}
/* chip = the white shrink-input pill, recessed */
.ufb-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:48px;font-size:15px;font-weight:500}
.ufb-example code{padding:9px 16px;border-radius:999px;font:700 16px/1 var(--b-font);color:#083C60;
  background:linear-gradient(180deg,#fff 0,#f1f1f1 100%);box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.6)}
/* CTA = the orange pill, with a navy ring so it separates from the sky fill */
.ufb-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 28px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 17px/1 var(--b-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;
  background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 0 0 2px #083C60,0 3px 0 2px rgba(4,38,63,.35),0 10px 16px -8px rgba(4,38,63,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.ufb-cta:hover{background:linear-gradient(180deg,#FFED52 0,#E99701 45%,#D08601 100%);color:#2E2200;text-shadow:1px 1px 0 #F2C94A}
.ufb-cta svg{width:18px;height:18px}
.ufb-cta:focus-visible{outline:3px solid #fff;outline-offset:5px}

@media (max-width:760px){
  .ufb-info{grid-template-columns:1fr;gap:20px;padding:20px 0}
  .ufb-card{padding:24px 20px 22px;border-radius:22px}
  .ufb-title{font-size:24px}
  .ufb-badge{width:50px;height:50px}
  .ufb-cta{display:flex;width:100%;justify-content:center}
}

/* urlf.ly info cards — OPTION F "one combined box"  (scoped: .uff-info)
   One wide white card: What is (left) | divider with bee | Why use (right), a yellow→sky top band, and a navy action bar
   with the example link and the single "Create free account" CTA. */
.uff-info{
  --f-navy:#083C60; --f-ink:#1E3445;
  --f-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  padding:28px 0;font-family:var(--f-font);text-align:left}
.uff-info *,.uff-info *::before,.uff-info *::after{box-sizing:border-box}

.uff-box{position:relative;overflow:hidden;border-radius:24px;color:var(--f-ink);background:linear-gradient(180deg,#FFFFFF 0,#F3F9FD 100%);
  box-shadow:0 2px 0 rgba(4,38,63,.25),0 24px 44px -18px rgba(4,38,63,.7)}
.uff-box::before{content:"";display:block;height:8px;background:linear-gradient(90deg,#F3CA0E 0,#FFED52 25%,#FEBA00 50%,#75C5F6 50%,#2791CE 100%)}
.uff-cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 34px;padding:30px 34px 26px}
.uff-col{min-width:0;display:flex;flex-direction:column}

.uff-head{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.uff-badge{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--f-navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 12px -6px rgba(4,38,63,.55)}
.uff-col--what .uff-badge{background:linear-gradient(180deg,#FFED52,#F3CA0E)}
.uff-col--why  .uff-badge{background:linear-gradient(180deg,#9ADAFB,#75C5F6)}
.uff-badge svg{width:27px;height:27px;display:block}
.uff-title{margin:0;font:700 26px/1.15 var(--f-font);color:var(--f-navy);letter-spacing:-.01em}
.uff-body{margin:0 0 14px;font-size:16px;line-height:1.6}
.uff-list{list-style:none;margin:0;padding:0}
.uff-list li{display:flex;align-items:flex-start;gap:12px;padding:5px 0;font-size:16px;line-height:1.5}
.uff-list li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--f-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px 14px no-repeat}

/* vertical divider with the bee on it */
.uff-divider{position:relative;background:repeating-linear-gradient(180deg,#B9D3E4 0 6px,transparent 6px 12px)}
.uff-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #B9D3E4}
.uff-bee{width:30px;height:26px;display:block}

/* action bar */
.uff-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 34px;color:#fff;
  background:linear-gradient(180deg,#0D4D7D 0,#083C60 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.uff-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:15px;color:#fff}
.uff-example code{padding:7px 14px;border-radius:999px;font:700 16px/1 var(--f-font);color:var(--f-navy);background:linear-gradient(180deg,#fff,#f1f1f1);box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}
.uff-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 30px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 18px/1 var(--f-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 2px 0 rgba(4,38,63,.5),0 8px 16px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.uff-cta:hover{background:linear-gradient(180deg,#FFED52 0,#E99701 45%,#D08601 100%);color:#2E2200;text-shadow:1px 1px 0 #F2C94A}
.uff-cta svg{width:18px;height:18px}
.uff-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:760px){
  .uff-info{padding:20px 0}
  .uff-cols{grid-template-columns:1fr;gap:0;padding:24px 20px 20px}
  .uff-divider{height:1px;margin:22px 0;background:repeating-linear-gradient(90deg,#B9D3E4 0 6px,transparent 6px 12px)}
  .uff-title{font-size:23px}
  .uff-bar{flex-direction:column;align-items:stretch;padding:18px 20px 22px;gap:14px}
  .uff-cta{display:flex;justify-content:center}
}

/* urlf.ly info cards — OPTION E "dark navy, split icon column"  (scoped: .ufe-info)
   Near-black navy cards, gradient-border glow (yellow card / sky card), icon column with a big step number on the left. */
.ufe-info{
  --e-bg-1:#0B3250; --e-bg-2:#041A2E; --e-yellow:#FFED52; --e-sky:#75DCF4;
  --e-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:28px 0;font-family:var(--e-font);text-align:left}
.ufe-info *,.ufe-info *::before,.ufe-info *::after{box-sizing:border-box}

.ufe-card{position:relative;display:flex;gap:0;border-radius:22px;color:#E6F2FA;
  background:linear-gradient(160deg,var(--e-bg-1) 0,var(--e-bg-2) 100%);border:1.5px solid var(--e-edge);
  box-shadow:0 0 34px -8px var(--e-glow),0 20px 34px -18px rgba(1,12,22,.9)}
.ufe-card--what{--e-accent:#FFED52;--e-edge:rgba(255,237,82,.55);--e-glow:rgba(255,210,26,.55);--e-grad:linear-gradient(135deg,#FFED52,#FEBA00 45%,rgba(117,220,244,.7))}
.ufe-card--why{--e-accent:#75DCF4;--e-edge:rgba(117,220,244,.55);--e-glow:rgba(73,166,245,.6);--e-grad:linear-gradient(135deg,#75DCF4,#49A6F5 45%,rgba(255,237,82,.7))}
/* true gradient border where mask-composite is supported */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .ufe-card{border-color:transparent}
  .ufe-card::before{content:"";position:absolute;inset:-1.5px;border-radius:22px;padding:1.5px;background:var(--e-grad);pointer-events:none;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
}

.ufe-side{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 0 24px;border-right:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));border-radius:22px 0 0 22px}
.ufe-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;color:#083C60;background:var(--e-accent);box-shadow:0 0 22px -2px var(--e-glow)}
.ufe-icon svg{width:29px;height:29px;display:block}
.ufe-num{writing-mode:vertical-rl;transform:rotate(180deg);font:700 15px/1 var(--e-font);letter-spacing:.3em;color:var(--e-accent)}

.ufe-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:28px 28px 26px 26px}
.ufe-title{margin:0 0 12px;font:700 25px/1.2 var(--e-font);color:#fff}
.ufe-title::after{content:"";display:block;width:48px;height:4px;margin-top:8px;border-radius:2px;background:var(--e-accent)}
.ufe-body{margin:0 0 14px;font-size:16px;line-height:1.6;color:#E6F2FA}
.ufe-list{list-style:none;margin:0;padding:0}
.ufe-list li{display:flex;align-items:flex-start;gap:12px;padding:5px 0;font-size:16px;line-height:1.5;color:#fff}
.ufe-list li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;border:1.5px solid var(--e-accent);
  background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px 14px no-repeat}
.ufe-card--what .ufe-list li::before{background-color:rgba(255,237,82,.16)}
.ufe-card--why .ufe-list li::before{background-color:rgba(117,220,244,.18)}

.ufe-foot{margin-top:auto;padding-top:18px}
.ufe-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:48px;font-size:15px;color:#E6F2FA}
.ufe-example code{padding:7px 14px;border-radius:8px;font:600 16px/1 var(--e-font);color:#FFED52;background:rgba(255,237,82,.1);border:1px dashed rgba(255,237,82,.7)}
.ufe-cta{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 26px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 17px/1 var(--e-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 0 24px -4px rgba(255,186,0,.6),0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55)}
.ufe-cta:hover{background:linear-gradient(180deg,#FFED52 0,#E99701 45%,#D08601 100%);color:#2E2200;text-shadow:1px 1px 0 #F2C94A}
.ufe-cta svg{width:18px;height:18px}
.ufe-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:760px){
  .ufe-info{grid-template-columns:1fr;gap:20px;padding:20px 0}
  .ufe-side{width:62px;padding:22px 0 18px;gap:14px}
  .ufe-icon{width:44px;height:44px;border-radius:13px}.ufe-icon svg{width:24px;height:24px}
  .ufe-num{font-size:13px}
  .ufe-main{padding:22px 16px 20px 16px}
  .ufe-title{font-size:22px}
  .ufe-cta{display:flex;width:100%;justify-content:center}
}

/* urlf.ly info cards — OPTION D "retro sticker"  (scoped: .ufd-info)
   Thick navy outline, hard offset shadow, flat cream/ice fills, square checkboxes, pressable pill button, bee accent. */
.ufd-info{
  --d-navy:#083C60; --d-shadow:#052B47;
  --d-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:34px 8px 34px 4px;font-family:var(--d-font);text-align:left;color:var(--d-navy)}
.ufd-info *,.ufd-info *::before,.ufd-info *::after{box-sizing:border-box}

.ufd-card{position:relative;display:flex;flex-direction:column;padding:28px 28px 26px;border:4px solid var(--d-navy);border-radius:18px;
  box-shadow:8px 8px 0 var(--d-shadow)}
.ufd-card--what{background:#FFF3B0}
.ufd-card--why{background:#DDF1FD}

.ufd-head{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ufd-badge{flex:none;display:grid;place-items:center;width:52px;height:52px;border:3px solid var(--d-navy);border-radius:14px;color:var(--d-navy);transform:rotate(-5deg);box-shadow:3px 3px 0 var(--d-navy)}
.ufd-card--what .ufd-badge{background:#FFD21A}
.ufd-card--why .ufd-badge{background:#75C5F6}
.ufd-badge svg{width:28px;height:28px;display:block}
.ufd-title{margin:0;font:700 26px/1.15 var(--d-font);letter-spacing:-.01em;color:var(--d-navy)}
.ufd-title::after{content:"";display:block;width:64px;height:5px;margin-top:6px;border-radius:3px;background:var(--d-navy)}
.ufd-card--what .ufd-title::after{background:#E59202}
.ufd-card--why .ufd-title::after{background:#2791CE}

.ufd-body{margin:0 0 14px;font-size:16px;line-height:1.6;color:#0D2F47}
.ufd-list{list-style:none;margin:0;padding:0}
.ufd-list li{display:flex;align-items:flex-start;gap:12px;padding:5px 0;font-size:16px;line-height:1.5;font-weight:500;color:#0D2F47}
.ufd-list li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border:2.5px solid var(--d-navy);border-radius:6px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23083C60' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5 9-11'/%3E%3C/svg%3E") center/15px 15px no-repeat;box-shadow:2px 2px 0 var(--d-navy)}

.ufd-foot{margin-top:auto;padding-top:20px}
.ufd-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:50px;font-size:15px;font-weight:500;color:#0D2F47}
.ufd-example code{padding:7px 14px;border:2.5px solid var(--d-navy);border-radius:8px;background:#fff;font:700 16px/1 var(--d-font);color:var(--d-navy);box-shadow:2px 2px 0 var(--d-navy)}
.ufd-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 26px;border:3px solid var(--d-navy);border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 17px/1 var(--d-font);color:#3A2A00;background:#FFB400;box-shadow:0 5px 0 var(--d-navy);transition:transform .08s,box-shadow .08s}
.ufd-cta:hover{background:#FFC62E;color:#2E2200}
.ufd-cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--d-navy)}
.ufd-cta svg{width:18px;height:18px}
.ufd-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* bee accent, top-right corner, hovering over the border */
.ufd-bee{position:absolute;right:-14px;top:-34px;width:62px;height:52px;transform:rotate(12deg);pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(5,43,71,.55))}
.ufd-bee::before{content:"";position:absolute;right:46px;top:30px;width:34px;height:14px;border-top:3px dotted #FFED52;border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-18deg)}
.ufd-bee-svg{width:100%;height:100%;display:block}

@media (max-width:760px){
  .ufd-info{grid-template-columns:1fr;gap:38px;padding:36px 8px 30px 2px}
  .ufd-card{padding:24px 20px 22px;box-shadow:6px 6px 0 var(--d-shadow)}
  .ufd-title{font-size:23px}
  .ufd-cta{display:flex;width:100%;justify-content:center}
}

/* urlf.ly info cards — OPTION G "one combined box, yellow"  (scoped: .ufg-info)
   Same layout as F (What is | bee divider | Why use, navy action bar with the example link + the single CTA)
   but the card is brand yellow (#FFE36A → #F5C518). Navy badges, navy check dots, dark-brown dashed divider,
   navy top band (3.2:1 vs the blue page, 7.5:1 vs the yellow) with a thin orange|blue accent line under it; the CTA stays orange on the navy bar. */
.ufg-info{
  --g-navy:#083C60; --g-ink:#1B2631; --g-rule:#6B4D00;
  --g-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  padding:28px 0;font-family:var(--g-font);text-align:left}
.ufg-info *,.ufg-info *::before,.ufg-info *::after{box-sizing:border-box}

.ufg-box{position:relative;overflow:hidden;border-radius:24px;color:var(--g-ink);
  background:radial-gradient(120% 90% at 12% 0,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 55%),linear-gradient(180deg,#FFE36A 0,#F5C518 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 rgba(4,38,63,.3),0 24px 44px -18px rgba(4,38,63,.75)}
.ufg-box::before{content:"";display:block;height:11px;
  background:linear-gradient(#083C60,#083C60) top/100% 7px no-repeat,linear-gradient(90deg,#E59202 0,#FFA901 50%,#2791CE 50%,#49A6F5 100%) bottom/100% 4px no-repeat}
.ufg-cols{display:grid;grid-template-columns:1fr 2px 1fr;gap:0 34px;padding:30px 34px 28px}
.ufg-col{min-width:0;display:flex;flex-direction:column}

.ufg-head{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ufg-badge{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(180deg,#1C6FA8 0,#083C60 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.3),0 0 0 3px rgba(255,255,255,.7),0 6px 12px -4px rgba(4,38,63,.55)}
.ufg-col--what .ufg-badge{color:#FFE36A}
.ufg-col--why  .ufg-badge{color:#9ADAFB}
.ufg-badge svg{width:27px;height:27px;display:block}
.ufg-title{margin:0;font:700 26px/1.15 var(--g-font);color:var(--g-navy);letter-spacing:-.01em;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.ufg-body{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--g-ink)}
.ufg-list{list-style:none;margin:0;padding:0}
.ufg-list li{display:flex;align-items:flex-start;gap:12px;padding:5px 0;font-size:16px;line-height:1.5;font-weight:500;color:var(--g-ink)}
.ufg-list li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--g-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  box-shadow:0 1px 0 rgba(255,255,255,.55)}

/* divider: dark-brown dashes (≥3:1 on the yellow) + white bee medallion with a navy ring */
.ufg-divider{position:relative;background:repeating-linear-gradient(180deg,var(--g-rule) 0 6px,transparent 6px 12px)}
.ufg-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:#fff;border:3px solid var(--g-navy);box-shadow:0 3px 0 rgba(4,38,63,.25)}
.ufg-bee{width:30px;height:26px;display:block}

/* action bar (navy, same as F) */
.ufg-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 34px;color:#fff;
  background:linear-gradient(180deg,#0D4D7D 0,#083C60 100%);box-shadow:inset 0 3px 0 #E59202}
.ufg-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:15px;color:#fff}
.ufg-example code{padding:7px 14px;border-radius:999px;font:700 16px/1 var(--g-font);color:var(--g-navy);background:linear-gradient(180deg,#fff,#f1f1f1);box-shadow:inset 0 2px 3px rgba(0,0,0,.2)}
.ufg-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 30px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 18px/1 var(--g-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 2px 0 rgba(4,38,63,.5),0 8px 16px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.55)}
.ufg-cta:hover{background:linear-gradient(180deg,#FFED52 0,#E99701 45%,#D08601 100%);color:#2E2200;text-shadow:1px 1px 0 #F2C94A}
.ufg-cta svg{width:18px;height:18px}
.ufg-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:760px){
  .ufg-info{padding:20px 0}
  .ufg-cols{grid-template-columns:1fr;gap:0;padding:24px 20px 20px}
  .ufg-divider{height:2px;margin:22px 0;background:repeating-linear-gradient(90deg,var(--g-rule) 0 6px,transparent 6px 12px)}
  .ufg-title{font-size:23px}
  .ufg-bar{flex-direction:column;align-items:stretch;padding:18px 20px 22px;gap:14px}
  .ufg-cta{display:flex;justify-content:center}
}

/* urlf.ly info cards — OPTION H "honeycomb"  (scoped: .ufh-info)
   Cream / ice cards with a faint honeycomb pattern in the corners, hexagon icon tiles (navy outline + yellow / sky fill),
   hexagon check bullets, and the orange pill CTA. */
.ufh-info{
  --h-navy:#083C60; --h-ink:#1B2B38;
  --h-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:28px 0;font-family:var(--h-font);text-align:left}
.ufh-info *,.ufh-info *::before,.ufh-info *::after{box-sizing:border-box}

.ufh-card{position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;padding:30px 30px 28px;border-radius:22px;color:var(--h-ink);
  border:1.5px solid var(--h-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 rgba(4,38,63,.25),0 22px 38px -18px rgba(4,38,63,.7)}
.ufh-card--what{--h-edge:#E8C84A;background:linear-gradient(180deg,#FFFDF2 0,#FFF4C6 100%)}
.ufh-card--why{--h-edge:#8CCBF0;background:linear-gradient(180deg,#F8FCFF 0,#DCF0FD 100%)}
/* honeycomb pattern, masked to fade out away from the corners so it never sits under body text */
.ufh-card::before{content:"";position:absolute;z-index:-1;inset:0;opacity:.55;
  -webkit-mask:radial-gradient(70% 55% at 100% 0,#000 0,transparent 100%),radial-gradient(60% 40% at 0 100%,#000 0,transparent 100%);
  mask:radial-gradient(70% 55% at 100% 0,#000 0,transparent 100%),radial-gradient(60% 40% at 0 100%,#000 0,transparent 100%)}
/* CSS vars don't resolve inside data-URIs, so the colour is set per card below */
.ufh-card--what::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34' fill='none' stroke='%23E8B400' stroke-width='2'/%3E%3Cpath d='M28 100L0 84V50M56 50v34l-28 16' fill='none' stroke='%23E8B400' stroke-width='2'/%3E%3C/svg%3E")}
.ufh-card--why::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34' fill='none' stroke='%2349A6F5' stroke-width='2'/%3E%3Cpath d='M28 100L0 84V50M56 50v34l-28 16' fill='none' stroke='%2349A6F5' stroke-width='2'/%3E%3C/svg%3E")}

.ufh-head{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ufh-hex{position:relative;flex:none;width:62px;height:70px;filter:drop-shadow(0 5px 4px rgba(4,38,63,.35))}
.ufh-hex svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ufh-hex-o{fill:var(--h-navy)}
.ufh-hex--y .ufh-hex-i{fill:#FFD21A}.ufh-hex--s .ufh-hex-i{fill:#75C5F6}
.ufh-hex-ic{position:absolute;inset:0;display:grid;place-items:center;color:var(--h-navy)}
.ufh-hex-ic svg{position:static;width:27px;height:27px}
.ufh-title{margin:0;font:700 26px/1.15 var(--h-font);color:var(--h-navy);letter-spacing:-.01em}

.ufh-body{margin:0 0 14px;font-size:16px;line-height:1.6}
.ufh-list{list-style:none;margin:0;padding:0}
.ufh-list li{display:flex;align-items:flex-start;gap:12px;padding:5px 0;font-size:16px;line-height:1.5;font-weight:500}
.ufh-list li::before{content:"";flex:none;width:24px;height:27px;margin-top:-1px;
  background:var(--h-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFE36A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

.ufh-foot{margin-top:auto;padding-top:20px}
.ufh-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:50px;font-size:15px;font-weight:500}
.ufh-example code{padding:8px 16px;border-radius:999px;font:700 16px/1 var(--h-font);color:var(--h-navy);background:linear-gradient(180deg,#fff,#f1f1f1);box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 0 0 2px #E8C84A}
.ufh-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 28px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 17px/1 var(--h-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 0 0 2px var(--h-navy),0 4px 0 2px rgba(4,38,63,.3),0 10px 16px -8px rgba(4,38,63,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.ufh-cta:hover{background:linear-gradient(180deg,#FFED52 0,#E99701 45%,#D08601 100%);color:#2E2200;text-shadow:1px 1px 0 #F2C94A}
.ufh-cta svg{width:18px;height:18px}
.ufh-cta:focus-visible{outline:3px solid var(--h-navy);outline-offset:5px}

@media (max-width:760px){
  .ufh-info{grid-template-columns:1fr;gap:20px;padding:20px 0}
  .ufh-card{padding:24px 20px 22px}
  .ufh-title{font-size:23px}.ufh-hex{width:54px;height:61px}
  .ufh-cta{display:flex;width:100%;justify-content:center}
}

/* urlf.ly info cards — OPTION I "shrink flow"  (scoped: .ufi-info)
   One box. A navy strip shows the product: long URL → SHRINK! → urlf.ly/4 (1 Paste, 2 Shrink, 3 Share).
   Below, on pale sky: What is (left) and Why use as three benefit tiles (right). White action bar with the single CTA. */
.ufi-info{
  --i-navy:#083C60; --i-ink:#1B2B38;
  --i-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  padding:28px 0;font-family:var(--i-font);text-align:left}
.ufi-info *,.ufi-info *::before,.ufi-info *::after{box-sizing:border-box}
.ufi-box{overflow:hidden;border-radius:26px;color:var(--i-ink);background:linear-gradient(180deg,#F3FAFE 0,#D9EEFB 100%);
  box-shadow:0 2px 0 rgba(4,38,63,.3),0 24px 44px -18px rgba(4,38,63,.75)}

/* flow strip */
.ufi-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:14px;padding:22px 30px 24px;color:#fff;
  background:linear-gradient(180deg,#0D4D7D 0,#083C60 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ufi-step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n l" "v v";gap:8px 10px;align-items:center;min-width:0}
.ufi-n{grid-area:n;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 16px/1 var(--i-font);color:var(--i-navy);
  background:linear-gradient(180deg,#FFED52,#FEBA00);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 rgba(0,0,0,.3)}
.ufi-steplabel{grid-area:l;font:700 14px/1 var(--i-font);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ufi-long,.ufi-shrink,.ufi-short{grid-area:v;display:flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;min-width:0}
.ufi-long{background:linear-gradient(180deg,#fff,#f1f1f1);color:#4A5A66;font-size:14px;box-shadow:inset 0 2px 3px rgba(0,0,0,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:44px}
.ufi-shrink{justify-content:center;font:700 15px/1 var(--i-font);letter-spacing:.06em;color:var(--i-navy);background:linear-gradient(180deg,#B4E3FC 0,#75C5F6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 rgba(0,0,0,.3)}
.ufi-short{gap:8px;font:700 19px/1 var(--i-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);box-shadow:0 2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.6)}
.ufi-bee{width:30px;height:26px;flex:none}
.ufi-arrow{display:grid;place-items:center;width:34px;height:34px;color:#FFED52;margin-top:30px}
.ufi-arrow svg{width:26px;height:26px}

/* body */
.ufi-cols{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;padding:28px 34px 22px}
.ufi-title{margin:0 0 10px;font:700 25px/1.2 var(--i-font);color:var(--i-navy)}
.ufi-title::after{content:"";display:block;width:52px;height:5px;margin-top:8px;border-radius:3px;background:linear-gradient(90deg,#FEBA00,#FFED52)}
.ufi-col+.ufi-col .ufi-title::after{background:linear-gradient(90deg,#2791CE,#75C5F6)}
.ufi-body{margin:0 0 12px;font-size:16px;line-height:1.6}
.ufi-more{margin:0;padding:12px 14px;border-radius:14px;font-size:15px;line-height:1.5;font-weight:500;color:var(--i-navy);background:#fff;box-shadow:inset 4px 0 0 #FEBA00,0 1px 0 rgba(8,60,96,.12)}
.ufi-tiles{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ufi-tiles li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#fff;color:var(--i-ink);font-size:16px;line-height:1.35;box-shadow:0 1px 0 rgba(8,60,96,.14),0 6px 12px -8px rgba(8,60,96,.35)}
.ufi-tiles b{font-weight:700;color:var(--i-navy)}
.ufi-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:var(--i-navy);background:linear-gradient(180deg,#9ADAFB,#75C5F6);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.ufi-ico svg{width:21px;height:21px}

/* action bar */
.ufi-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 34px;background:#fff;border-top:1px solid #C5DDEE}
.ufi-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:15px;color:var(--i-ink)}
.ufi-example code{padding:7px 14px;border-radius:999px;font:700 16px/1 var(--i-font);color:var(--i-navy);background:#E8F3FB;border:1px solid #AFCFE5}
.ufi-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 30px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 18px/1 var(--i-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 0 0 2px var(--i-navy),0 4px 0 2px rgba(4,38,63,.3),inset 0 1px 0 rgba(255,255,255,.6)}
.ufi-cta:hover{background:linear-gradient(180deg,#FFED52 0,#E99701 45%,#D08601 100%);color:#2E2200;text-shadow:1px 1px 0 #F2C94A}
.ufi-cta svg{width:18px;height:18px}
.ufi-cta:focus-visible{outline:3px solid var(--i-navy);outline-offset:5px}

@media (max-width:860px){
  .ufi-flow{grid-template-columns:1fr;gap:6px;padding:20px 20px 22px}
  .ufi-arrow{margin:0 auto;transform:rotate(90deg);height:26px;width:26px}
  .ufi-cols{grid-template-columns:1fr;gap:26px;padding:24px 20px 20px}
  .ufi-bar{flex-direction:column;align-items:stretch;padding:16px 20px 22px;gap:14px}
  .ufi-cta{display:flex;justify-content:center}
}

/* urlf.ly info cards — OPTION J "tabbed, CSS-only"  (scoped: .ufj-info)
   One box. A navy rail holds two glossy pill tabs (radio buttons, no JS): "What is" (default) and "Why use".
   Active tab = orange glossy pill, inactive = sky glossy pill. Both panels share one grid cell so the box never changes height. */
.ufj-info{
  --j-navy:#083C60; --j-ink:#1B2B38;
  --j-font:Ubuntu,'Lucida Grande','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  padding:28px 0;font-family:var(--j-font);text-align:left}
.ufj-info *,.ufj-info *::before,.ufj-info *::after{box-sizing:border-box}
.ufj-box{position:relative;overflow:hidden;border-radius:26px;background:#fff;color:var(--j-ink);box-shadow:0 2px 0 rgba(4,38,63,.3),0 24px 44px -18px rgba(4,38,63,.75)}
.ufj-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

.ufj-tabs{position:relative;display:flex;gap:14px;align-items:center;padding:18px 24px;background:linear-gradient(180deg,#0D4D7D 0,#083C60 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.ufj-tab{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;cursor:pointer;user-select:none;white-space:nowrap;
  font:700 17px/1 var(--j-font);color:var(--j-navy);
  background:linear-gradient(180deg,#B4E3FC 0,#75C5F6 100%);box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7);transition:filter .15s}
.ufj-tab:hover{filter:brightness(1.06)}
.ufj-tab svg{width:21px;height:21px;flex:none}
#ufj-t1:checked ~ .ufj-tabs .ufj-tab--1,#ufj-t2:checked ~ .ufj-tabs .ufj-tab--2{
  color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 2px 3px rgba(150,90,0,.35),inset 0 1px 0 rgba(255,255,255,.55);transform:translateY(2px)}
#ufj-t1:focus-visible ~ .ufj-tabs .ufj-tab--1,#ufj-t2:focus-visible ~ .ufj-tabs .ufj-tab--2{outline:3px solid #fff;outline-offset:3px}
.ufj-bee{position:absolute;right:26px;top:50%;width:62px;height:52px;margin-top:-26px;pointer-events:none}
.ufj-bee::before{content:"";position:absolute;right:62px;top:26px;width:70px;height:20px;border-top:3px dotted #FFED52;border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-8deg)}
.ufj-bee-svg{width:100%;height:100%;display:block}

.ufj-panels{display:grid}
.ufj-panel{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;align-items:center;padding:30px 34px 28px;visibility:hidden;opacity:0;transition:opacity .15s;
  background:linear-gradient(180deg,#fff 0,var(--j-tint) 100%);border-left:8px solid var(--j-stripe)}
.ufj-panel--1{--j-tint:#FFF6CC;--j-stripe:#F3CA0E}
.ufj-panel--2{--j-tint:#DCF0FD;--j-stripe:#49A6F5}
#ufj-t1:checked ~ .ufj-panels .ufj-panel--1,#ufj-t2:checked ~ .ufj-panels .ufj-panel--2{visibility:visible;opacity:1}
.ufj-title{margin:0 0 10px;font:700 27px/1.15 var(--j-font);color:var(--j-navy)}
.ufj-body{margin:0;font-size:16px;line-height:1.6}
.ufj-list{list-style:none;margin:0;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(8,60,96,.14),0 10px 18px -12px rgba(8,60,96,.45)}
.ufj-list li{display:flex;align-items:flex-start;gap:12px;padding:6px 0;font-size:16px;line-height:1.5;font-weight:500}
.ufj-list li+li{border-top:1px dashed #C5DDEE}
.ufj-list li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--j-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px 14px no-repeat}

.ufj-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:16px 34px;background:#F2F8FC;border-top:1px solid #C5DDEE}
.ufj-example{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:15px}
.ufj-example code{padding:7px 14px;border-radius:999px;font:700 16px/1 var(--j-font);color:var(--j-navy);background:#fff;border:1px solid #AFCFE5}
.ufj-cta{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 30px;border-radius:999px;text-decoration:none;white-space:nowrap;
  font:700 18px/1 var(--j-font);color:#5A4300;text-shadow:1px 1px 0 #FFE15E;background:linear-gradient(180deg,#FFED52 0,#FEBA00 45%,#FFA901 100%);
  box-shadow:0 0 0 2px var(--j-navy),0 4px 0 2px rgba(4,38,63,.3),inset 0 1px 0 rgba(255,255,255,.6)}
.ufj-cta:hover{background:linear-gradient(180deg,#FFED52 0,#E99701 45%,#D08601 100%);color:#2E2200;text-shadow:1px 1px 0 #F2C94A}
.ufj-cta svg{width:18px;height:18px}
.ufj-cta:focus-visible{outline:3px solid var(--j-navy);outline-offset:5px}

@media (max-width:860px){
  .ufj-tabs{padding:14px 14px;gap:10px}
  .ufj-bee{display:none}
  .ufj-tab{flex:1;justify-content:center;padding:0 10px;gap:7px;font-size:15px;height:48px}
  .ufj-tab svg{width:18px;height:18px}
  .ufj-panel{grid-template-columns:1fr;padding:24px 20px 22px;border-left-width:6px}
  .ufj-bar{flex-direction:column;align-items:stretch;padding:16px 20px 22px;gap:14px}
  .ufj-cta{display:flex;justify-content:center}
}

/* Back button above the title on logged-in user and advertiser pages */
.back-row{margin:6px 0 2px;text-align:left}
.back-btn{width:auto}

/* Public link bundle page */
.bundle-links{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.bundle-link{display:block;padding:1rem;border:1px solid #d0d7de;border-radius:.5rem;text-decoration:none;color:var(--link)}
.bundle-link:hover{background:#f6f8fa}
.bundle-link-title{display:block;font-weight:600;font-size:1.1rem}
.bundle-link-host{display:block;font-size:.85rem;color:#57606a;margin-top:.25rem;word-break:break-all}
.bundle-description{margin:.5rem 0 0}

/* API keys */
.api-key{display:block;padding:.5rem .75rem;background:#f4f4f4;border-radius:4px;word-break:break-all;user-select:all}
.notice{border:1px solid #b7d7b0;background:#f1faf0;padding:.75rem 1rem;border-radius:6px;margin:1rem 0}

/* Webhooks */
.hook-events label{display:inline-block;margin-right:1rem}
.hook-status-ok{color:#1a7f37}
.hook-status-fail{color:#b42318}

/* Teams */
.team-row-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.team-row-actions form{display:inline-flex;gap:.25rem;align-items:center;margin:0}
.team-danger{margin-top:.5rem}
.team-danger-btn{background:#b42318;border-color:#b42318;color:#fff}

/* Domains */
.domain-status{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:.85rem;border:1px solid #d0d7de;background:#f6f8fa;color:#57606a}
.domain-status-verified{border-color:#b7d7b0;background:#f1faf0;color:#1a7f37}
.domain-status-pending{border-color:#f0d9a0;background:#fff8e6;color:#8a5a00}
.domain-status-disabled{border-color:#e5b4ae;background:#fdf1f0;color:#b42318}
.domain-primary{display:inline-block;margin-left:.4rem;padding:.1rem .5rem;border-radius:4px;font-size:.8rem;background:#e7f0fd;color:#0b5cad}
.domain-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.domain-actions form{display:inline-flex;margin:0}
.domain-help{margin:1rem 0;padding:.75rem 1rem;border:1px solid #d0d7de;border-radius:6px;background:#f6f8fa}
.domain-help code{word-break:break-all}
.domain-clear{margin:1rem 0}
.team-warning{border-color:#e0b4b0;background:#fdf1f0}

/* Link stats: KPI tiles + interactive chart card */
.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat.kpi{position:relative;text-align:left;padding:14px 16px 14px 20px;border:1px solid #cfe3f1;border-radius:16px;background:#fff;box-shadow:0 8px 18px -14px rgba(4,38,63,.7);overflow:hidden}
.stat.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--sky-bd)}
.stat.kpi.kpi-1::before{background:var(--yellow-bd)}
.stat.kpi.kpi-4::before{background:#1aa37a}
.stat.kpi h2{font:700 12px var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:#3d6074}
.stat.kpi p{margin-top:6px;font:700 32px/1.05 var(--font-head);color:var(--navy)}
.stat.kpi .stat-sub{margin-top:6px;font:600 12px/1.3 var(--font);color:#3d6074}
.stats-chart{padding-top:14px}
.sc-tabs-wrap{position:relative;border-bottom:1px solid #d5e4ee}
.sc-tabs-wrap::before,.sc-tabs-wrap::after{content:"";position:absolute;top:0;bottom:12px;width:36px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.sc-tabs-wrap::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.sc-tabs-wrap::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.sc-tabs-wrap.sc-more-l::before,.sc-tabs-wrap.sc-more-r::after{opacity:1}
.sc-tabs{position:relative;display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.sc-tabs::-webkit-scrollbar{display:none}
.sc-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px}
.sc-sum-item{padding:10px 14px;border-radius:12px;background:#eaf5fd}
.sc-sum-item dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#3d6074;font-weight:700}
.sc-sum-item dd{margin:2px 0 0;font:700 22px/1.15 var(--font-head);color:var(--navy)}
.sc-sum-item dd span{margin-left:8px;font:600 12px var(--font);color:#3d6074}
@media (min-width:701px){.click-table{table-layout:fixed;width:100%}.click-table td{overflow-wrap:anywhere}}
.sc-more{margin-top:10px}
.sc-more>summary{cursor:pointer;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:#eaf5fd;color:var(--navy);font-weight:700;font-size:13px;list-style:none}
.sc-more>summary::-webkit-details-marker{display:none}
.sc-more>summary:hover{background:#d3ebf8}
.sc-more>summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.sc-more[open]>summary .sc-more-open{display:none}
.sc-more:not([open])>summary .sc-more-close{display:none}
.sc-tab{flex:none;cursor:pointer;border:0;border-radius:999px;padding:9px 16px;background:#eaf5fd;color:var(--navy);font:700 14px var(--font)}
.sc-tab:hover{background:#d3ebf8}
.sc-tab[aria-selected=true]{background:linear-gradient(180deg,var(--blue-1),var(--blue-2) 45%,var(--blue-3));color:#fff;text-shadow:0 1px 1px rgba(4,38,63,.5)}
.sc-tab:focus-visible,.sc-panel:focus-visible,.sc-seg-btn:focus-visible,.sc-svg:focus-visible,.sc-row:focus-visible,.sc-leg:focus-visible,.sc-seg-c:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.sc-panels{position:relative;padding-top:14px}
.sc-panel{min-height:240px;outline-offset:4px}
.sc-tip{position:absolute;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:10px;background:var(--navy);color:#fff;font-size:12px;line-height:1.35;box-shadow:0 6px 16px rgba(4,38,63,.35);white-space:nowrap}
.sc-tip[hidden]{display:none}
.sc-tip strong{font-size:13px}
.sc-seg{display:inline-flex;margin:0 0 8px;padding:3px;border-radius:999px;background:#eaf5fd}
.sc-seg-btn{cursor:pointer;border:0;border-radius:999px;padding:5px 14px;background:transparent;color:var(--navy);font:700 12px var(--font)}
.sc-seg-btn[aria-pressed=true]{background:#fff;box-shadow:0 1px 3px rgba(4,38,63,.25)}
.sc-svg{display:block;width:100%;height:auto;touch-action:pan-y}
.sc-grid{stroke:#e0ecf4;stroke-width:1}
.sc-axis{stroke:#8fb4c9;stroke-width:1}
.sc-tick{fill:#3d6074;font-size:11px}
.sc-empty{fill:#3d6074;font-size:14px}
.sc-stop-a{stop-color:#3B8DDB;stop-opacity:.45}
.sc-stop-b{stop-color:#3B8DDB;stop-opacity:.02}
.sc-line{stroke:#2a7bd0;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.sc-guide{stroke:#8fb4c9;stroke-width:1;stroke-dasharray:4 3}
.sc-dot{fill:#fff;stroke:#2a7bd0;stroke-width:3}
.sc-bars,.sc-legend{list-style:none;margin:0;padding:0}
.sc-row{display:grid;grid-template-columns:minmax(90px,1fr) minmax(80px,2fr) 96px;gap:12px;align-items:center;padding:8px 8px;border-radius:10px;font-size:14px}
.sc-row:hover,.sc-leg:hover,.sc-hl{background:#eaf5fd}
.sc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--navy);font-weight:600}
.sc-bar{display:block;width:100%;height:12px}
.sc-bar-bg{fill:#e3eef6}
.sc-bar-fg{fill:#3B8DDB}
.sc-val{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;color:var(--navy)}
.sc-pct{min-width:42px;text-align:right;color:#3d6074;font-size:12px}
.sc-donut-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:24px 36px;justify-content:center}
.sc-donut{width:220px;height:220px;flex:none}
.sc-donut-bg{stroke:#e3eef6}
.sc-seg-c{transition:opacity .12s}
.sc-seg-c.sc-dim{opacity:.3}
.sc-donut-n{fill:var(--navy);font:700 28px var(--font-head)}
.sc-donut-l{fill:#3d6074;font-size:12px}
.sc-legend{flex:1 1 220px;max-width:420px}
.sc-leg{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:10px;font-size:14px}
.sc-swatch{width:12px;height:12px;border-radius:4px}
.sc-s0{stroke:#2a7bd0}.sc-sw0{background:#2a7bd0}
.sc-s1{stroke:#f0a500}.sc-sw1{background:#f0a500}
.sc-s2{stroke:#1aa37a}.sc-sw2{background:#1aa37a}
.sc-s3{stroke:#8b5cf6}.sc-sw3{background:#8b5cf6}
.sc-s4{stroke:#e5484d}.sc-sw4{background:#e5484d}
.sc-s5{stroke:#0ea5b7}.sc-sw5{background:#0ea5b7}
.sc-s6{stroke:#6b7a86}.sc-sw6{background:#6b7a86}
.sc-s7{stroke:#d6639b}.sc-sw7{background:#d6639b}
.sc-fallback h3{margin:0 0 6px;font-size:16px}
.stats-chart.sc-ready .sc-fallback{display:none}
.sc-data{margin-top:14px;border-top:1px solid #d5e4ee;padding-top:10px}
.sc-data summary{cursor:pointer;font-weight:700;color:var(--link);font-size:14px}
.sc-data summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.sc-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:10px}
.sc-table-scroll{max-height:260px;overflow:auto!important}
.sc-data caption,.sc-cap{text-align:left;font-weight:700;margin:0 0 4px;color:var(--navy)}
@media (max-width:700px){
  .sc-sum-item{padding:8px 10px}
  .sc-sum-item dd{font-size:18px}
  .sc-sum-item dd span{display:block;margin:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat.kpi{padding:10px 10px 10px 14px}
  .stat.kpi p{font-size:24px}
  .sc-row{grid-template-columns:minmax(0,1fr) 84px;row-gap:4px}
  .sc-row .sc-bar{grid-column:1/-1;grid-row:2}
  .sc-row .sc-val{grid-row:1;grid-column:2}
  .sc-donut{width:180px;height:180px}
}
@media (prefers-reduced-motion:reduce){.sc-seg-c{transition:none}}

/* Dashboard: Plan & tools card */
.tools-block{margin-top:14px;padding-top:12px;border-top:1px solid #d5e4ee}
.tools-h{margin:0 0 2px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#3d6074}
.tools-upsell{margin:8px 0 0}
.tool-locked{display:inline-flex;align-items:center;gap:5px;background:#eef2f5;color:#5d7380;border:1px dashed #b7c6d0;border-radius:999px;font-weight:700;text-decoration:none}
.tool-locked:hover,.tool-locked:focus-visible{background:#e2eaf0;color:#3d6074}