/* 365tool.net premium design system — shared by every static route. */
:root {
  --c1: #23c5aa;
  --c2: #5068f5;
  --c3: #35a9c7;
  --c4: #21b893;
  --c5: #f2b85a;
  --c6: #ed8568;
  --text: #14243b;
  --text2: #5b6b80;
  --text3: #8492a5;
  --soft: #f4f7fb;
  --card: #fff;
  --r: 20px;
  --rsm: 12px;
  --page-bg: #f4f7fb;
  --line: #e3eaf2;
  --brand-ink: #101e35;
  --brand-blue: #5068f5;
  --brand-mint: #23c5aa;
  --shadow-card: 0 10px 32px rgba(20, 36, 59, .065);
  --shadow-hover: 0 18px 42px rgba(20, 36, 59, .12);
}

html { scroll-behavior: smooth; background: var(--page-bg); }
body {
  background: var(--page-bg) !important;
  color: var(--text) !important;
  font-family: 'Nunito', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before { background: var(--page-bg) !important; animation: none !important; }
#fc, .magic-orbs, .magic-sparkles { display: none !important; }
button, input, select, textarea { font: inherit; }
a { text-decoration-thickness: .06em; text-underline-offset: .16em; }
::selection { color: #fff; background: #5068f5; }

/* Deep navy navigation anchors the brighter tool workspace. */
.site-header, header.site-header, body > header {
  color: #f5f8ff !important;
  background: rgba(15, 29, 51, .97) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 8px 26px rgba(9, 22, 42, .16) !important;
  backdrop-filter: blur(18px);
}
.hdr, .hdr-inner { height: 68px !important; max-width: 1480px; }
.hdr-inner { padding-left: clamp(16px, 3vw, 40px) !important; padding-right: clamp(16px, 3vw, 40px) !important; }
.app { padding-top: 68px !important; }
.side {
  top: 68px !important;
  background: #fff !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: 8px 0 26px rgba(20,36,59,.035) !important;
}
.logo-gem, .lgem, .drawer-logo, .tgem {
  background: linear-gradient(135deg, var(--brand-mint), var(--brand-blue)) !important;
  box-shadow: 0 6px 18px rgba(35,197,170,.2) !important;
  animation: none !important;
}
.logo-word, .lword { color: #f5f8ff !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.hdr-nav a, .hdr-r a { color: #c4d0e0 !important; border-radius: 10px !important; text-decoration: none !important; }
.hdr-nav a:hover, .hdr-r a:hover { color: #fff !important; background: rgba(255,255,255,.09) !important; }
.hdr-nav a.active { color: #fff !important; background: rgba(80,104,245,.23) !important; }
.hdr-tools-btn, .hdr-nav .hdr-tools-btn {
  color: #0e2236 !important;
  background: linear-gradient(120deg, #55e0c5, #a5f2df) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(35,197,170,.18) !important;
}
.hdr-tools-btn:hover { color: #0e2236 !important; filter: brightness(1.04); }
.hide-mobile { transition: color .18s ease, background .18s ease; }
.drawer, .mobile-drawer, .blog-drawer { background: #101e35 !important; color: #eef4ff !important; }
.drawer a, .mobile-drawer a, .blog-drawer a { color: #e6eefb !important; }
.rl { height: 3px !important; background: linear-gradient(90deg, #23c5aa, #5068f5, #9b7cf7) !important; animation: none !important; }

/* Homepage hero: high-contrast editorial panel with a focused search action. */
#HOME .hero, .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 6vw, 70px) clamp(20px, 5vw, 64px) !important;
  margin: 18px 0 30px !important;
  color: #fff !important;
  background: radial-gradient(ellipse at 90% 10%, rgba(72,113,255,.36), transparent 36%), linear-gradient(122deg, #101e35 0%, #172b4a 58%, #193c55 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 30px !important;
  box-shadow: 0 24px 60px rgba(16,30,53,.16) !important;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  right: -100px;
  bottom: -220px;
  border: 1px solid rgba(85,224,197,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(85,224,197,.035), 0 0 0 72px rgba(85,224,197,.025);
  pointer-events: none;
}
.htag, .hero .htag, .blog-hero-tag, .img-cat-badge, .tool-hero-tag, .t-tag {
  color: #74ead3 !important;
  background: rgba(35,197,170,.12) !important;
  border: 1px solid rgba(94,232,209,.24) !important;
  border-radius: 999px !important;
}
.hero h1, .hero .hg, .magic-heading {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  letter-spacing: -.045em !important;
  line-height: 1.08 !important;
}
.hsub, .hero .hsub, .hero p { color: #c2cde0 !important; }
.hchars { opacity: .82; }
.hero-search-wrap { max-width: 760px; }
.hero-search-bar, .hinp {
  min-height: 64px !important;
  padding: 8px 9px 8px 18px !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: 17px !important;
  box-shadow: 0 12px 34px rgba(4,15,31,.2) !important;
}
.hero-search-input, .hinp input { color: #14243b !important; }
.hero-search-input::placeholder, .hinp input::placeholder { color: #8794a6 !important; }
.hero-search-btn, .hero-search-bar button {
  min-height: 46px !important;
  padding: 0 22px !important;
  color: #fff !important;
  background: var(--brand-blue) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(80,104,245,.24) !important;
}
.hero-search-sub { color: #afc2d5 !important; }
.hdrop, .hdrop.show { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 15px !important; box-shadow: var(--shadow-hover) !important; }

/* Shared content canvas and hierarchy. */
.home, .tpage, .page-wrap, .tool-page-wrap, .blog-grid, .img-page-layout,
.main, .tool-main, .tool-body { color: var(--text) !important; }
.main, .tool-body { background: transparent !important; }
.page-wrap { max-width: 1360px !important; padding-top: 30px !important; padding-bottom: 76px !important; }
.breadcrumb, .breadcrumb a, .breadcrumb-current, .tbc, .tbc a { color: #748399 !important; }
.breadcrumb a:hover, .tbc a:hover { color: var(--brand-blue) !important; }
.hero h1, .magic-heading, .ttitle, .t-hero h1, .img-hero h1, .tool-hero h1, .blog-hero h1 {
  font-family: 'Space Grotesk', 'Nunito', system-ui, sans-serif !important;
  letter-spacing: -.035em !important;
}
.ttitle, .t-hero h1, .img-hero h1, .tool-hero h1, .blog-hero h1 {
  color: var(--text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}
.hsub, .tdesc2, .t-desc, .blog-hero p, .img-hero p, .tool-hero-desc { color: var(--text2) !important; }
.sechdr, .sec-ttl, .secttl { color: var(--text) !important; }

/* Tool cards, calculators, article panels, and directory surfaces. */
.spot, .tile, .tool-card, .ttile, .tcard, .card, .t-hero, .img-hero,
.img-card, .blog-hero, .blog-content, .blog-body, .how-box, .faq-box,
.trust-box, .res-box, .sidebar-card, .sb-card, .img-sb-card, .rel-box,
.cta-box, .how-it-works, .faq-section, .rel-tools, .dir-hero,
.dir-search-wrap, .tl-card, .cat-item, .stat-card {
  background-color: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
}
.spot { overflow: hidden; }
.tcard, .tool-card, .card, .blog-content, .blog-body, .img-card,
.how-box, .how-it-works, .faq-box, .faq-section, .rel-tools,
.trust-box, .sidebar-card, .sb-card, .cta-box { padding: clamp(20px, 3vw, 30px) !important; }
.tile, .tool-card, .ttile, .tl-card, .rel-tile, .rel-post {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.tile:hover, .tool-card:hover, .ttile:hover, .tl-card:hover, .rel-tile:hover {
  transform: translateY(-3px);
  border-color: #becaff !important;
  box-shadow: var(--shadow-hover) !important;
}
.tile::before { display: none !important; }
.tile-title, .tool-card-title, .ttile-title, .tlc-name, .rel-name,
.rel-post-title, .sb-rel-name, .sb-article-title, .sidebar-card h3 {
  color: #1d2c43 !important;
}
.tile-desc, .tool-card-desc, .ttile-desc, .rel-desc, .sb-rel-desc,
.rel-post-cat, .sb-article-desc { color: #718096 !important; }
.tool-card-title, .tcardlbl, .tcard-title, .sb-title {
  color: #566783 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: .085em !important;
}
.tool-hero, .t-hero, .img-hero {
  background: linear-gradient(135deg, #fff 0%, #f7faff 100%) !important;
  border: 1px solid #e2e9f3 !important;
  border-left: 4px solid var(--brand-mint) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-card) !important;
}
.tool-hero-tag, .img-cat-badge, .blog-hero-tag {
  color: #167c78 !important;
  background: #e9faf6 !important;
  border-color: #c9f0e7 !important;
}
.blog-hero { border-top: 3px solid #5068f5 !important; }
.blog-body {
  color: #42536b !important;
  font-size: 1.02rem !important;
  line-height: 1.82 !important;
}
.blog-body h2, .blog-body h3, .faq-section h2, .how-it-works h2,
.faq-box h2, .rel-tools h2, .cta-box h3, .sidebar-card h3 {
  color: #172a45 !important;
}
.blog-body strong, .how-it-works strong { color: #172a45 !important; }
.blog-body .tip-box, .cta-box {
  background: #effaf8 !important;
  border-color: #ccefe8 !important;
}
.blog-body .tip-box-title { color: #148d80 !important; }
.faq-item { border-color: var(--line) !important; border-radius: 14px !important; }
.faq-q, .sb-faq-q { color: #243650 !important; }
.faq-q:hover, .sb-faq-q:hover { background: #f5f8ff !important; color: var(--brand-blue) !important; }
.faq-q.open { background: #eef2ff !important; color: #435be2 !important; }
.faq-a, .sb-faq-a, .how-box p, .how-it-works p, .how-it-works li,
.trust-txt { color: #61728a !important; }
.rel-tile, .sb-rel-item { background: #f7f9fc !important; border: 1px solid var(--line) !important; }
.rel-tile:hover, .sb-rel-item:hover { background: #f0f4ff !important; border-color: #cbd5ff !important; }
.rel-post { border-color: #edf1f6 !important; }
.rel-post:hover .rel-post-title { color: var(--brand-blue) !important; }
.tile-icon, .tlc-icon { filter: saturate(.88); }

/* Form controls are larger, quiet, and consistent across calculators. */
.hero-search-bar, .hinp, .fi, .fsel, .dir-search-wrap input,
input, select, textarea {
  border-color: #d9e2ec;
}
.fi, .fsel, input, select, textarea {
  color: #172a45 !important;
  background-color: #fff !important;
  border-radius: 12px !important;
}
.fi, .fsel { min-height: 48px; padding: 12px 14px !important; }
.fi::placeholder, input::placeholder, textarea::placeholder { color: #97a3b4 !important; }
.fl, .field-label { color: #5b6c83 !important; }
.fi:focus, .fsel:focus, input:focus, select:focus, textarea:focus,
.hero-search-bar:focus-within, .hinp:focus-within {
  border-color: #7187ff !important;
  box-shadow: 0 0 0 4px rgba(80,104,245,.12) !important;
  outline: none !important;
}
.btn-grad, .btn-g, .hero-search-btn, .btn-primary, .img-btn-primary,
.btng, .sb-article-btn, .dir-search-btn {
  color: #fff !important;
  background: linear-gradient(120deg, #5068f5, #3d7be8) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 18px rgba(80,104,245,.2) !important;
}
.btn-grad:hover, .btn-g:hover, .hero-search-btn:hover, .btn-primary:hover,
.img-btn-primary:hover, .btng:hover, .sb-article-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.btn-o, .btn-out, .img-btn-secondary, .btno, .ract-btn {
  color: #465bd1 !important;
  background: #fff !important;
  border: 1px solid #d8def4 !important;
  border-radius: 12px !important;
}
.btn-grad, .btn-g, .btn-o, .btn-out, .img-btn, .btno, .btng,
.catp, .sw, .ract-btn { min-height: 42px; }
.catp, .sw, .tl-cat { color: #5c6d83 !important; background: #fff !important; border: 1px solid var(--line) !important; }
.catp.on, .sw.on, .tl-cat.active { color: #455be2 !important; background: #eef1ff !important; border-color: #ced5ff !important; }
.res-box, .tres, .sres { background: linear-gradient(145deg, #f4f7ff, #effaf8) !important; border-color: #dce5f2 !important; }
.res-label, .rlbl, .res-value { color: #193452 !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.res-chips .rchip, .rchips > *, .rchip { color: #187e78 !important; background: #e5f8f4 !important; border-color: #c7eee5 !important; }
.owl-insight, .ins { background: #edf9f7 !important; border-color: #d1efe8 !important; }
.owl-lbl, .inslbl { color: #137d74 !important; }
.toast { background: #14243b !important; color: #fff !important; border-radius: 12px !important; box-shadow: var(--shadow-hover) !important; }
.hdrop, .drop, .autocomplete-list { border-color: var(--line) !important; border-radius: 14px !important; box-shadow: var(--shadow-hover) !important; }

/* Blog, directory, and image hubs feel like one publication. */
.blog-grid, .tool-page-wrap, .img-page-layout { gap: 24px !important; }
.blog-grid { grid-template-columns: minmax(0, 1fr) 280px !important; }
.tool-page-wrap { grid-template-columns: minmax(0, 1fr) 320px !important; }
.tool-sidebar { top: 88px !important; }
.dir-hero {
  padding: clamp(24px, 4vw, 42px) !important;
  background: linear-gradient(120deg, #14243b, #233d61) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 24px !important;
}
.dir-hero h1, .dir-hero p { color: #fff !important; }
.dir-hero p { opacity: .78; }
.dir-badge { color: #7be7d1 !important; }
.tl-card { overflow: hidden; text-decoration: none !important; }
.tlc-badge { border-radius: 999px !important; }
.results-count { color: #66778f !important; }
.img-card, .img-sb-card { overflow: hidden; }
.stage { border-color: #e1e8f1 !important; border-radius: 18px !important; }
.sinp, .sres { padding: 22px !important; }
.sres { border-left: 1px solid #dfe7f0 !important; }
.ins, .how-box, .res-box { border-radius: 16px !important; }

/* Short, branded footer and subtle focus states. */
.site-footer {
  color: #c3d0e2 !important;
  background: #101e35 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.site-footer a { color: #eaf2ff !important; }
.site-footer a:hover { color: #76e8d3 !important; }
.ft-logo, .ft-logo-row { color: #fff !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.ft-copy, .ft-bottom { color: #9fb0c6 !important; }
:focus-visible { outline: 3px solid rgba(80,104,245,.65) !important; outline-offset: 2px; }

@media (max-width: 1000px) {
  .side { top: 0 !important; }
  .hdr, .hdr-inner { height: 62px !important; }
  .app { padding-top: 62px !important; }
  .tool-page-wrap, .img-page-layout, .blog-grid { grid-template-columns: minmax(0,1fr) !important; }
  .tool-sidebar { position: static !important; }
  .blog-grid { max-width: 900px; }
  .hero h1 { font-size: clamp(2rem, 6vw, 3.5rem) !important; }
  .page-wrap, .home, .tpage { padding-left: clamp(16px,3vw,28px) !important; padding-right: clamp(16px,3vw,28px) !important; }
}
@media (max-width: 640px) {
  .hdr, .hdr-inner { height: 58px !important; padding-left: 13px !important; padding-right: 13px !important; gap: 8px !important; }
  .app { padding-top: 58px !important; }
  .logo-word, .lword { font-size: .92rem !important; }
  .hdr-nav { gap: 2px !important; }
  .hdr-nav a { padding: 7px 9px !important; font-size: .76rem !important; }
  .hdr-nav .hdr-tools-btn { padding: 8px 12px !important; }
  .page-wrap, .home, .tpage { padding-left: 14px !important; padding-right: 14px !important; }
  #HOME .hero, .hero { padding: 32px 20px !important; margin: 12px 0 22px !important; border-radius: 22px !important; }
  .hero h1 { font-size: clamp(1.85rem, 9vw, 2.65rem) !important; line-height: 1.1 !important; }
  .hero-search-bar { min-height: 56px !important; gap: 7px !important; padding-left: 12px !important; }
  .hero-search-btn { min-height: 42px !important; padding: 0 13px !important; }
  .stage { grid-template-columns: minmax(0,1fr) !important; }
  .sinp { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 11px !important; }
  .blog-grid, .img-page-layout, .tool-page-wrap { grid-template-columns: minmax(0,1fr) !important; }
  .rel-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .tcard, .card, .tool-card, .blog-content, .blog-body, .img-card,
  .how-box, .how-it-works, .faq-box, .faq-section, .rel-tools,
  .sidebar-card, .sb-card { padding: 18px !important; border-radius: 17px !important; }
  .fi, .fsel, input, select, textarea { font-size: 16px !important; }
  .fr2 { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }
  .site-footer { padding: 32px 16px !important; }
  .ft-links { gap: 12px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .blog-body { font-size: .98rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}