/* CA Bundals marketing site: the six "search" pages (added 9 Oct 2026).
   ca-practice-management-software, ca-office-management-software,
   gst-software-for-ca-firms, task-management-software-for-ca-firm,
   compliance-management-software, software-used-by-chartered-accountants.
   Uses the tokens and the .mock / .pl / .kpi / .pcard pieces from chrome.css.
   Everything here is prefixed fp- so nothing on other pages changes.
   Also used by the eight pages by kind of work and practice (added 10 Oct 2026):
   income-tax-software-for-ca-firms, tds-software-for-ca-firms,
   audit-software-for-ca-firms, roc-compliance-software-for-ca-firms,
   payroll-software-for-ca-firms, bookkeeping-software-for-ca-firms,
   software-for-sole-practitioner-ca, software-for-multi-partner-ca-firm.
   Their "does / does not" block is .fp-yn and .fp-no below. */

.fp-hero{padding-bottom:40px}
.fp-hero h1{font-size:54px;max-width:940px}
.fp-hero .row-btns{margin-top:4px}
.fp-hero .btn.bs{background:var(--sky);color:var(--blue)}
.fp-hero .btn.bs:hover{background:#E1EAFC}

/* product screen on the grey stage: white card on #F4F6FA */
.fp-stage{background:var(--bg);border-radius:28px;padding:40px}
.fp-stage>.mock{max-width:1000px;margin:0 auto}
.fp-vis{background:var(--bg);border-radius:24px;padding:26px;min-width:0}
.fp-vis.c{display:flex;justify-content:center}
.fp-cap{margin:14px 2px 0;font-size:13px;line-height:1.55;color:var(--mut);text-align:center}

/* text beside a screen */
.fp-rows{display:flex;flex-direction:column}
.fp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;align-items:center;padding:64px 0;border-top:1px solid var(--line2)}
.fp-row:first-child{border-top:0}
.fp-row:nth-child(even) .fp-vis{order:-1}
.fp-txt{display:flex;flex-direction:column;gap:16px;min-width:0}
.fp-txt h2{margin:0;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-1px}
.fp-txt p{margin:0;font-size:16.5px;line-height:1.65;color:var(--mut)}
.fp-txt p b,.fp-prose p b{color:var(--ink)}
.fp-txt a,.fp-prose a,.fp-q a{color:var(--blue);font-weight:600}

/* plain reading block */
.fp-prose{max-width:820px;display:flex;flex-direction:column;gap:16px}
.fp-prose h2{margin:0;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-1px}
.fp-prose p{margin:0;font-size:17px;line-height:1.7;color:var(--mut)}

/* tables inside a screen: columns come from --c, phone columns from --cm */
.fp-t{border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.fp-r{display:grid;grid-template-columns:var(--c,1.5fr 1fr 1fr);gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line2)}
.fp-r:first-child{border-top:0}
.fp-r>*{min-width:0;overflow-wrap:anywhere}
.fp-r.hd{background:var(--soft);font-size:12px;font-weight:700;color:var(--mut)}
.fp-r b{font-weight:700}
.fp-r small{display:block;font-size:12px;color:var(--mut);font-weight:500;margin-top:1px}
.fp-r .num{text-align:right;font-variant-numeric:tabular-nums}
.fp-k4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fp-vis .fp-k4{grid-template-columns:1fr 1fr}
.fp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fp-two>*{min-width:0}
.fp-line{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fp-line>*{min-width:0}
.fp-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--sky);color:var(--blue);font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.fp-who{display:flex;align-items:center;gap:10px;min-width:0}
.fp-who>span:last-child{min-width:0}
.fp-tabs{display:flex;gap:6px;flex-wrap:wrap}
.fp-tabs span{padding:6px 10px;border-radius:8px;background:var(--soft);font-size:12px;font-weight:700;color:var(--mut)}
.fp-tabs span.on{background:var(--sky);color:var(--blue)}
.fp-load{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:12px;align-items:center}
.fp-load small{color:var(--mut);font-size:12px;text-align:right}
.fp-stamp{align-self:flex-start;border:2px solid #0E9F6E;color:#067647;border-radius:8px;padding:4px 12px;font-weight:800;font-size:15px;letter-spacing:2px;transform:rotate(-4deg)}
.fp-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px}
.fp-tile{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:12px;padding:12px;min-width:0}
.fp-tile .ico2{width:38px;height:38px;flex:0 0 38px}
.fp-tile b{display:block;font-size:13.5px}
.fp-tile small{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.fp-tile>span:last-child{min-width:0}

/* month grid */
.fp-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.fp-cal .wd{font-size:11px;font-weight:700;color:var(--mut2);text-align:center;padding:2px 0}
.fp-d{min-height:70px;border:1px solid var(--line2);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--mut);min-width:0}
.fp-d.x{border-color:transparent}
.fp-chip{display:block;border-radius:5px;padding:2px 6px;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-chip.gst,.fp-key i.gst{background:#DDF5F1;color:#0B6B60}
.fp-chip.tds,.fp-key i.tds{background:#FCE4F0;color:#9D174D}
.fp-chip.roc,.fp-key i.roc{background:#FDE9D7;color:#9A3412}
.fp-chip.pay,.fp-key i.pay{background:#E9E3FF;color:#4C1D95}
.fp-key{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);font-weight:600}
.fp-key span{display:inline-flex;align-items:center;gap:6px}
.fp-key i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* straight answers */
.fp-qa{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-bottom:1px solid var(--line)}
.fp-q{padding:22px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.fp-q b{font-size:17px;font-weight:700;line-height:1.35}
.fp-q p{margin:0;font-size:15.5px;line-height:1.65;color:var(--mut)}

/* what it does / what it does not do (10 Oct 2026) */
.fp-yn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.fp-yn>div{border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}
.fp-yn h3{margin:0 0 16px;font-size:20px;font-weight:800;letter-spacing:-.4px}
.fp-no{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fp-no li{display:flex;gap:10px;font-size:15.5px;line-height:1.55}
.fp-no li>span{min-width:0}
.fp-no li::before{content:'';flex:0 0 20px;height:20px;margin-top:1px;border-radius:50%;background:#F2F4F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%236B7280' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat}
.fp-yn .ticks li>span{min-width:0}

/* related pages */
.fp-more{display:flex;flex-wrap:wrap;gap:10px}
.fp-more a{padding:10px 16px;border-radius:999px;background:var(--soft);color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none}
.fp-more a:hover{background:var(--sky);color:var(--blue)}
.fp-verify{margin:0;font-size:13.5px;line-height:1.6;color:var(--mut)}

/* the 30 apps as a directory */
.fp-dir{background:var(--bg);border-radius:28px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.fp-grp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px 8px;min-width:0}
.fp-grp h3{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px}
.fp-grp>p{margin:6px 0 12px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.fp-app{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:13px 0;border-top:1px solid var(--line2);text-decoration:none;color:inherit}
.fp-app .ico2{width:40px;height:40px}
.fp-app b{display:block;font-size:15px;font-weight:700}
.fp-app span{display:block;font-size:14px;line-height:1.5;color:var(--mut);margin-top:2px}
.fp-app:hover b{color:var(--blue)}

@media (max-width:900px){
  .fp-hero h1{font-size:38px}
  .fp-stage{padding:20px;border-radius:20px}
  .fp-row{grid-template-columns:1fr;gap:26px;padding:44px 0}
  .fp-row:nth-child(even) .fp-vis{order:0}
  .fp-txt h2,.fp-prose h2{font-size:28px;letter-spacing:-.7px}
  .fp-vis{padding:16px;border-radius:18px}
  .fp-qa{grid-template-columns:1fr}
  .fp-yn{grid-template-columns:1fr}
  .fp-dir{grid-template-columns:1fr;padding:16px;border-radius:20px}
  .fp-k4{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .fp-hero h1{font-size:31px;letter-spacing:-1px}
  .fp-stage{padding:12px;margin:0 -8px}
  .fp-vis{padding:12px;margin:0 -8px}
  .fp-stage .mock-body,.fp-vis .mock-body{padding:14px}
  .fp-txt h2,.fp-prose h2{font-size:25px}
  .fp-txt p,.fp-prose p{font-size:16px}
  .fp-r{grid-template-columns:var(--cm,1fr auto);font-size:12.5px;padding:10px 12px}
  .fp-r .hm{display:none}
  .fp-two{grid-template-columns:1fr}
  .fp-load{grid-template-columns:86px minmax(0,1fr)}
  .fp-load small{grid-column:1/-1;text-align:left;margin-top:-6px}
  .fp-d{min-height:42px;padding:4px;font-size:11px;border-radius:6px}
  .fp-cal{gap:4px}
  .fp-chip{font-size:0;padding:0;height:6px;border-radius:3px}
  .fp-grp{padding:18px 16px 4px}
  .fp-yn>div{padding:18px 16px}
  .fp-more a{font-size:14px}
}