/* Skyline skin for the signing tool — lifted from skylinpartners.online 2026-08-19.
   Served at /skyline-theme.css and stamped into every page by the front door.
   The brand WORDS are swapped by the front door itself (text replacements);
   this file handles colors, fonts, icons, and hiding the maker's own links.
   Live file: /var/www/docuseal-theme/skyline-theme.css (eve-owned, edit + refresh). */
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap);

:root{
  --sky-bg:#F6F8FB; --sky-soft:#ECF1F6;
  --sky-navy:#0A1420; --sky-navy2:#0E2235;
  --sky-ink:#10202E; --sky-muted:#566573;
  --sky-cyan:#15C2C9; --sky-cyan-hover:#19D2DA; --sky-cyan-deep:#0B8E96; --sky-cyan-tint:#E4F6F7;
  --sky-line:#E3E8EE;
}

html, body{
  background:var(--sky-bg) !important;
  color:var(--sky-ink) !important;
  font-family:"Inter", system-ui, sans-serif !important;
}
.bg-base-100{ background-color:#FFFFFF !important; }
.bg-base-200{ background-color:var(--sky-bg) !important; }
.bg-base-300{ background-color:var(--sky-soft) !important; }

h1,h2,h3,h4{ color:var(--sky-navy) !important; letter-spacing:-.022em; }

.btn-primary, .btn-neutral, button[type=submit]{
  background-color:var(--sky-cyan) !important;
  border-color:var(--sky-cyan) !important;
  color:#04222A !important;
  border-radius:8px !important;
}
.btn-primary:hover, .btn-neutral:hover, button[type=submit]:hover{
  background-color:var(--sky-cyan-hover) !important;
  border-color:var(--sky-cyan-hover) !important;
}

a{ color:var(--sky-cyan-deep); }
.link{ color:var(--sky-cyan-deep) !important; }

.input, .textarea, .select,
input[type=text], input[type=email], input[type=password]{
  background:#FFFFFF !important;
  border-color:var(--sky-line) !important;
  color:var(--sky-ink) !important;
  border-radius:8px !important;
}
.input:focus, .textarea:focus, .select:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus{
  border-color:var(--sky-cyan) !important;
  outline-color:var(--sky-cyan) !important;
  box-shadow:0 0 0 3px var(--sky-cyan-tint) !important;
}

.checkbox:checked, .toggle:checked{
  background-color:var(--sky-cyan) !important;
  border-color:var(--sky-cyan) !important;
}
input[type=checkbox], input[type=radio]{ accent-color:var(--sky-cyan); }
::selection{ background:var(--sky-cyan-tint); }

/* Brand mark: hide the maker's orange logo, show the Skyline icon.
   The words beside it are text-swapped to "Skyline DocuSign" by the front door. */
a[href="/"]:has(> svg + span) > svg{ display:none !important; }
a[href="/"]:has(> svg + span)::before{
  content:""; display:inline-block; width:36px; height:36px;
  background:url(/skyline-logo.png) center/contain no-repeat; border-radius:8px;
}
a[href="/"].text-2xl.font-bold svg{ display:none !important; }
a[href="/"].text-2xl.font-bold::before{
  content:""; display:inline-block; width:36px; height:36px;
  background:url(/skyline-logo.png) center/contain no-repeat; border-radius:8px;
}

a[href="/"] > svg:only-child{ display:none !important; }
a[href="/"]:has(> svg:only-child)::before{
  content:""; display:inline-block; width:34px; height:34px;
  background:url(/skyline-logo.png) center/contain no-repeat; border-radius:8px;
  vertical-align:middle; }

/* Front page for logged-out visitors: the Clean Light porch is injected by the
   front door; the maker's own hero pieces vanish. */
div:has(> h1.text-6xl.font-bold) > svg{ display:none !important; }
h1.text-6xl.font-bold{ display:none !important; }
h2:empty{ display:none !important; }

.sky-porch{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);
  min-height:78vh; width:100vw; max-width:none; margin-left:calc(50% - 50vw);
  text-align:left; position:relative; overflow:hidden; }
body:has(.sky-porch){ overflow-x:hidden; }
.sky-porch .sky-left{ display:flex; flex-direction:column; justify-content:center;
  padding:60px 48px 60px max(24px, calc(50vw - 590px)); }
.sky-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--sky-cyan-deep); margin-bottom:14px;
  animation:skyup .5s ease-out both .05s; }
.sky-rule{ width:64px; height:3px; background:var(--sky-cyan); border-radius:2px;
  margin-bottom:22px; animation:skyup .5s ease-out both .05s; }
.sky-name{ font-size:clamp(2.4rem,5.5vw,3.9rem); font-weight:800;
  letter-spacing:-.028em; color:var(--sky-navy) !important; line-height:1.04;
  animation:skyup .5s ease-out both .1s; }
.sky-tag{ color:var(--sky-muted); font-size:1.08rem; margin:18px 0 30px;
  max-width:34ch; animation:skyup .5s ease-out both .18s; }
.sky-btn{ display:inline-flex; align-items:center; background:var(--sky-cyan);
  color:#04222A !important; font-weight:700; font-size:1.02rem; border-radius:8px;
  padding:15px 38px; text-decoration:none; width:fit-content;
  animation:skyup .5s ease-out both .26s; transition:background .18s, transform .15s; }
.sky-btn:hover{ background:var(--sky-cyan-hover); transform:translateY(-1px); }
.sky-right{ position:static; background:none; }
.sky-right svg{ position:absolute; right:0; bottom:0; width:min(40vw, 780px);
  min-width:300px; height:auto; opacity:.55; }
@keyframes skyup{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@media(max-width:760px){
  .sky-porch{ grid-template-columns:1fr; min-height:auto; }
  .sky-right{ min-height:190px; margin-top:10px; }
  .sky-porch .sky-left{ padding:30px 10px 10px; }
}
div:has(> h1.text-6xl.font-bold) .badge{ display:none !important; }
section:has(a[href*="docuseal"]):not(:has(h1.text-6xl)){ display:none !important; }
div.grid:has(a[href*="docuseal"]){ display:none !important; }

/* No maker links anywhere: their site, their code page, their support address,
   the Upgrade/Plans buttons — all point off-brand, all hidden. */
a[href*="docuseal"]{ display:none !important; }
div:has(> a[href*="docuseal.com"]){ display:none !important; }

.sky-join{ display:inline-block; margin-top:16px; font-size:.95rem; font-weight:600;
  color:var(--sky-cyan-deep) !important; text-decoration:none;
  animation:skyup .5s ease-out both .32s; }
.sky-join:hover{ text-decoration:underline; }