/* Accountants Factory — shared site footer.
   Link this on EVERY page (before css/night.css) and paste the markup
   from components/footer.html before </body>. Keeps one identical
   footer across the whole site, including any new page. */

footer{background:#0D1A17;color:#8CA29E;font-size:.85rem;padding:36px 0 18px}
footer .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
footer h5{color:#fff;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
footer a{color:#8CA29E;display:block;padding:3px 0;text-decoration:none}
footer a:hover{color:#C79A2E}
/* Shared nav bits, kept here because this is the one stylesheet every page
   already links.

   1. The menu labels are longer than they used to be (Start a Business,
      Run Your Business, Build & Scale), so hold each tab on a single line,
      tighten the padding, and fall back to the burger a little earlier. */
.menu{gap:2px}
.menu .mi>a{white-space:nowrap;padding:8px 10px}
/* The five parent tabs carry no href - they only open their dropdown, and
   every destination is a dropdown item (owner, 2026-09-03). An <a> with no
   href loses the pointer cursor and is not keyboard focusable, so the cursor
   comes back here and the markup carries tabindex="0"; .mi:focus-within then
   opens the dropdown for anyone tabbing through. user-select stops the label
   highlighting when the tab is clicked. */
.menu .mi>a:not([href]){cursor:pointer;user-select:none;-webkit-user-select:none}
/* measured: the longest item, "Outsourced Accounting & Bookkeeping",
   needs 376px to stay on one line */
.menu .drop{min-width:380px}
/* the full row needs ~1275px; below that show the burger instead */
@media(max-width:1300px){.menu{display:none}.burger{display:block}}
/* on a very small phone the logo, both buttons and the burger do not fit on
   one row and push the page sideways. Client Login drops out of the top bar
   there - it is still in the mobile drawer and in the footer. */
@media(max-width:400px){.nav-in .btn-ghost{display:none}}

/* only hold the buttons on one line where the full menu is shown - on a
   phone they are allowed to wrap as before, or they push the page sideways */
@media(min-width:1301px){.nav-in .btn{white-space:nowrap}}

/* 2. The "overview" link at the top of a mobile dropdown. It is how the
      Start / Run / Build hub pages are reached on a phone, where the tab
      itself only opens the dropdown instead of navigating. */
.mnav .m-over{color:#016F69;font-weight:800}
.mnav .m-over i{font-size:.7rem}
body.dark .mnav .m-over{color:#5FBDB5}

/* brand sits on its own row so the link columns can mirror the main menu */
/* the footer is dark in day and night alike, so it carries the recoloured
   wordmark and needs no white panel behind it */
.fbrand{display:inline-block;margin-bottom:22px}
.fbrand img{height:38px;width:auto;display:block}

/* five columns, one per main-menu section */
.fg{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
/* The global side is not the India site: its menu is two tabs - accounting &
   bookkeeping, and Zoho - so its footer is the two columns that mirror them.
   (owner, 2026-09-04: "simple clean, only accounting and zoho"). */
.fg.fg2{grid-template-columns:repeat(2,1fr);max-width:760px}
footer h5 a{color:#fff;display:inline;padding:0}
footer h5 a:hover{color:#C79A2E}
.fbot{border-top:1px solid rgba(255,255,255,.09);margin-top:24px;padding-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.76rem}
@media(max-width:1080px){.fg{grid-template-columns:repeat(3,1fr);gap:22px 24px}}
@media(max-width:700px){.fg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.fg{grid-template-columns:1fr}}
/* the two-column global footer only collapses on a phone */
@media(max-width:1080px){.fg.fg2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.fg.fg2{grid-template-columns:1fr}}

/* The global nav is two short tabs, not the India site's five long ones, so
   it does not need the 1300px burger fallback - hold the row down to tablet
   width and let the burger take over there. */
@media(min-width:861px) and (max-width:1300px){
  nav.g .menu{display:flex}
  nav.g .burger{display:none}
}
@media(max-width:860px){nav.g .menu{display:none}nav.g .burger{display:block}}


/* The scope-of-work note that every page carries (owner, 2026-09-04): we
   maintain the books, and anything beyond that is for the reader's own legal
   advisor and tax consultant. It sits outside footer .wrap, so it repeats
   .wrap's width and padding to line up with the columns above it. */
.fdisc{max-width:1200px;margin:14px auto 0;padding:12px 20px 0;font-size:.72rem;
  line-height:1.6;color:#6B807C;border-top:1px solid rgba(255,255,255,.06)}
.fdisc b{color:#8CA29E;font-weight:800}
.fdisc a{display:inline;color:#8CA29E;text-decoration:underline;padding:0}
.fdisc a:hover{color:#C79A2E}

/* Cards that ARE links - the country cards on the global side, and the
   "also on the global desk" cards on the Zoho pages. They used to be a plain
   card with a teal heading that happened to be an anchor, which the owner
   read as "no hyperlinks here": the colour was the only clue and the rest of
   the card did nothing. Now the whole card is the <a>, and it carries an
   arrow row that underlines and slides on hover. */
a.feature-card{text-decoration:none;color:inherit;cursor:pointer}
a.feature-card h3{color:var(--teal,#016F69)}
a.feature-card .fc-go{margin-top:auto;padding-top:14px;display:inline-flex;
  align-items:center;gap:7px;font-size:.82rem;font-weight:800;
  color:var(--teal,#016F69)}
a.feature-card .fc-go i{font-size:.7rem;transition:transform .18s}
a.feature-card:hover .fc-go{text-decoration:underline}
a.feature-card:hover .fc-go i{transform:translateX(4px)}
a.feature-card:focus-visible{outline:3px solid var(--gold,#C79A2E);outline-offset:3px}

/* FAQ blocks. Kept in the one stylesheet every page links, so any page can
   carry an FAQ without repeating the CSS. */
.faqs{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq{background:#fff;border:1.5px solid #E7EFEE;border-radius:14px;padding:0 18px;
  box-shadow:0 4px 12px rgba(19,36,32,.04)}
.faq summary{list-style:none;cursor:pointer;padding:15px 0;font-weight:700;color:#132420;
  font-size:.95rem;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:#016F69;font-size:.75rem;transition:.2s;flex:0 0 auto}
.faq[open] summary i{transform:rotate(180deg)}
.faq p{margin:0 0 16px;font-size:.88rem;color:#6E807C;line-height:1.65}
.faq p:last-child{margin-bottom:16px}

/* Zoho listing proof: the firm's own entries on Zoho's directories, cropped
   to the listing card. Personal contact details are masked out of the source
   images, per the no-phone-number-outside-contact.html rule. */
.zp-proof{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;margin:0 auto}
.zp-shot{margin:0;background:#fff;border:1.5px solid #E7EFEE;border-radius:14px;padding:12px;
  box-shadow:0 4px 10px rgba(19,36,32,.04), 0 14px 30px rgba(19,36,32,.07);
  display:flex;flex-direction:column;gap:10px}
.zp-shot img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid #EEF4F3}
.zp-shot figcaption{font-size:.82rem;color:var(--grey,#6E807C);line-height:1.5}
.zp-shot figcaption b{color:var(--ink,#132420);font-weight:800}
.zp-shot figcaption a{font-weight:700;color:var(--teal,#016F69);white-space:nowrap}
.zp-shot figcaption a i{font-size:.6rem;margin-left:3px;opacity:.7}
@media(max-width:820px){.zp-proof{grid-template-columns:1fr}}