/* ===== RAINCLOUD shared additions (nav, footer, sub-page components) ===== */
/* NAV — one header for every template. Desktop is 1024px and up.
   overflow-x: clip keeps the page from scrolling sideways without turning
   the body into a scroll container, which would clip the dropdowns. */
html, body { overflow-x: clip !important; }
nav#nav,
nav#nav.scrolled {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  overflow: visible;
  /* backdrop-filter clips descendants that hang outside the bar, including dropdowns */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 10, 10, 0.96);
  transition: background-color .4s ease, border-color .4s ease, padding .4s ease;
}
nav#nav .nav-inner {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 20px; overflow: visible; min-height: 44px;
}
nav#nav .nav-logo { flex: none; white-space: nowrap; }
nav#nav .nav-toggle {
  display: none; flex: none; margin-left: auto; position: relative;
  width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; color: var(--text-primary);
  cursor: pointer;
}
nav#nav .nav-toggle span {
  position: absolute; left: 13px; width: 18px; height: 1.5px; margin: 0 !important;
  background: currentColor; transition: top .2s ease, transform .2s ease, opacity .18s ease;
}
nav#nav .nav-toggle span:nth-child(1) { top: 16px; }
nav#nav .nav-toggle span:nth-child(2) { top: 21px; }
nav#nav .nav-toggle span:nth-child(3) { top: 26px; }
nav#nav .nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
nav#nav .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
nav#nav .nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
nav#nav .nav-links {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 22px;
  list-style: none; margin: 0; padding: 0; overflow: visible;
}
nav#nav .nav-links > li { flex: none; position: relative; }
nav#nav .nav-links > li > a:not(.nav-cta),
nav#nav .nav-parent {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary);
  white-space: nowrap; line-height: 1; background: none; border: 0; padding: 8px 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
nav#nav .nav-parent-label { white-space: nowrap; }
nav#nav .nav-caret { display: block; opacity: 0.75; transition: transform .18s ease; }
nav#nav .nav-links > li > a:not(.nav-cta):hover,
nav#nav .nav-parent:hover,
nav#nav .has-dropdown.is-ancestor > .nav-parent,
nav#nav a[aria-current="page"] { color: var(--text-primary); }
nav#nav .nav-links a::after { display: none; }
nav#nav .nav-cta {
  color: var(--text-primary); font-size: 0.62rem !important; letter-spacing: 0.05em;
  padding: 9px 12px; border: 1px solid var(--text-primary);
  max-width: none !important; line-height: 1.2; text-align: center; white-space: nowrap !important;
  display: inline-flex; align-items: center; justify-content: center;
}
nav#nav .nav-cta:hover { background: var(--text-primary); color: var(--bg-primary); }
nav#nav .has-dropdown { position: relative; }
nav#nav .dropdown {
  display: block; visibility: hidden; opacity: 0; pointer-events: none;
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 232px;
  max-width: min(320px, calc(100vw - 24px));
  margin: 0; padding: 8px; list-style: none; z-index: 1200;
  background: #141414; border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
nav#nav .dropdown.is-end { left: auto; right: 0; }
nav#nav .dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
nav#nav .dropdown li { padding: 0; margin: 0; }
nav#nav .dropdown a {
  display: block; padding: 10px 12px; font-size: 0.84rem; line-height: 1.35;
  letter-spacing: 0.01em; text-transform: none; white-space: nowrap;
  color: var(--text-secondary); border-radius: 2px;
}
nav#nav .dropdown a::after { display: none !important; width: 0 !important; }
nav#nav .dropdown a:hover,
nav#nav .dropdown a:focus-visible { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
nav#nav .dropdown a[aria-current="page"] { color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
nav#nav .nav-parent:focus-visible,
nav#nav .nav-toggle:focus-visible,
nav#nav .nav-links a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
@media (min-width: 1024px) {
  nav#nav .nav-toggle { display: none; }
  nav#nav .nav-links { display: flex; margin-left: auto; }
  nav#nav .has-dropdown.is-hover > .dropdown,
  nav#nav .has-dropdown:focus-within > .dropdown,
  nav#nav .has-dropdown.is-open > .dropdown {
    visibility: visible; opacity: 1; pointer-events: auto;
  }
  nav#nav .has-dropdown.is-dismissed > .dropdown,
  nav#nav .has-dropdown.is-dismissed:hover > .dropdown,
  nav#nav .has-dropdown.is-dismissed.is-hover > .dropdown,
  nav#nav .has-dropdown.is-dismissed:focus-within > .dropdown {
    visibility: hidden; opacity: 0; pointer-events: none;
  }
  nav#nav .has-dropdown.is-dismissed.is-open > .dropdown {
    visibility: visible; opacity: 1; pointer-events: auto;
  }
  nav#nav .has-dropdown.is-hover > .nav-parent .nav-caret,
  nav#nav .has-dropdown:focus-within > .nav-parent .nav-caret,
  nav#nav .has-dropdown.is-open > .nav-parent .nav-caret { transform: rotate(180deg); }
  nav#nav .has-dropdown.is-dismissed > .nav-parent .nav-caret { transform: none; }
  nav#nav .has-dropdown.is-dismissed.is-open > .nav-parent .nav-caret { transform: rotate(180deg); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  nav#nav .has-dropdown:hover > .dropdown { visibility: visible; opacity: 1; pointer-events: auto; }
  nav#nav .has-dropdown:hover > .nav-parent .nav-caret { transform: rotate(180deg); }
  nav#nav .has-dropdown.is-dismissed:hover > .dropdown { visibility: hidden; opacity: 0; pointer-events: none; }
  nav#nav .has-dropdown.is-dismissed:hover > .nav-parent .nav-caret { transform: none; }
}
@media (max-width: 1023px) {
  nav#nav .nav-toggle { display: inline-flex; }
  nav#nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 6px 22px 18px; background: #0A0A0A;
    border-bottom: 1px solid var(--border-subtle);
    max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px);
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  nav#nav .nav-links.open { display: flex; }
  nav#nav .nav-links > li { border-bottom: 1px solid var(--border-subtle); width: 100%; }
  nav#nav .nav-links > li:last-child { border-bottom: 0; }
  nav#nav .nav-parent,
  nav#nav .nav-links > li > a:not(.nav-cta) {
    width: 100%; justify-content: space-between; padding: 15px 0;
    font-size: 0.78rem; text-align: left;
  }
  nav#nav .dropdown {
    display: none; position: static; visibility: hidden; opacity: 1; pointer-events: none;
    min-width: 0; max-width: none; margin: 0; padding: 0 0 12px;
    background: transparent; border: 0; box-shadow: none;
  }
  nav#nav .dropdown::before { display: none; }
  nav#nav .has-dropdown:hover > .dropdown,
  nav#nav .has-dropdown:focus-within > .dropdown { display: none; visibility: hidden; }
  nav#nav .has-dropdown.is-open > .dropdown {
    display: block; visibility: visible; opacity: 1; pointer-events: auto;
  }
  nav#nav .has-dropdown.is-open > .nav-parent .nav-caret { transform: rotate(180deg); }
  nav#nav .dropdown a {
    padding: 9px 0 9px 14px; margin-left: 2px;
    border-left: 1px solid var(--border-medium); border-radius: 0;
    white-space: normal; font-size: 0.95rem;
  }
  nav#nav .nav-cta-item { padding-top: 12px; }
  nav#nav .nav-cta {
    display: flex; width: 100%; white-space: normal; padding: 14px 16px;
    font-size: 0.72rem; line-height: 1.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  nav#nav .nav-caret, nav#nav .nav-toggle span { transition: none; }
}
/* FOOTER */
footer.sf { border-top: 1px solid var(--border-subtle); padding: 56px 0 40px; background: var(--bg-primary); }
footer.sf .sf-top { display: grid; grid-template-columns: 1.1fr 2fr; gap: 40px; align-items: start; }
footer.sf .sf-logo { font-family: var(--font-heading); font-weight: 300; font-size: 0.95rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-tertiary); }
footer.sf .sf-logo em { font-style: normal; color: var(--text-tertiary); font-weight: 200; }
footer.sf .sf-tag { margin-top: 12px; font-size: .78rem; color: var(--text-tertiary); max-width: 280px; }
footer.sf .sf-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
footer.sf .sf-h { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; font-weight: 600; }
footer.sf ul { list-style: none; display: block; padding: 0; margin: 0; }
footer.sf li { margin-bottom: 8px; }
footer.sf li a { font-size: 0.78rem; color: var(--text-secondary); transition: color .3s ease; }
footer.sf li a:hover { color: var(--text-primary); }
footer.sf .sf-copy { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-subtle); font-size: .68rem; color: var(--text-tertiary); }
@media (max-width: 768px) { footer.sf .sf-top { grid-template-columns: 1fr; } footer.sf .sf-cols { grid-template-columns: 1fr 1fr; } }
/* INSTEAD OF */
.instead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); }
.instead-row { background: var(--bg-primary); padding: clamp(24px, 2.8vw, 36px); }
.alt .instead-row { background: var(--bg-secondary); }
.instead-row .io { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.instead-row h3 { font-size: 1.05rem; margin-bottom: 12px; }
.instead-row p { font-size: .84rem; line-height: 1.65; }
.instead-row .tradeoff { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font-size: .78rem; color: var(--text-tertiary); }
.instead-row .tradeoff b { color: var(--text-secondary); font-weight: 500; }
@media (max-width: 900px) { .instead { grid-template-columns: 1fr; } }
/* PAIRS */
.pairs { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.pairs .pl { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary); margin-right: 10px; font-weight: 600; }
.pair-chip { font-size: .78rem; color: var(--text-primary); border: 1px solid var(--border-medium); padding: 10px 18px; transition: all .3s; }
.pair-chip:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.pairs-wrap { padding: 36px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
/* button arrow sizing (svg had no intrinsic size) */
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.btn { white-space: nowrap; }
@media (max-width: 480px) { .btn { white-space: normal; } }
.tier-card { position: relative; }
.tier-badge { position: absolute; top: 16px; right: 16px; margin: 0; }
.hero .container { width: 100%; }
.cards.c1 { --cols: 1; }
.text-link { display: inline-block; color: var(--text-primary); border-bottom: 1px solid var(--border-medium); padding-bottom: 1px; transition: color .3s, border-color .3s; }
.text-link:hover { color: var(--accent-blue); border-color: var(--accent-blue); }