/* =========================================================
   PDFWork — design system
   Typography tokens follow Razorpay's own Blade Design System
   naming and scale (theme.typography.fonts.* / size & line-height
   scale). Inter is self-hosted here (SIL Open Font License, so it
   can be legally bundled and works fully offline). TASA Orbiter is
   Blade's heading typeface but is a commercially licensed font we
   don't hold a license for, so — exactly as Blade's own fallback
   chain specifies — headings fall through to Arial until a licensed
   copy of TASA Orbiter is added as a local @font-face.
   ========================================================= */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/inter-latin-700-normal.woff2') format('woff2')}

:root{
 /* ---- Institutional navy + seal-gold palette ----
    Navy carries brand weight everywhere (nav, buttons, links, headings).
    Gold appears ONLY as a trust/verification signal — a "seal" accent for
    completed/verified states — not as a general decoration color. This is
    deliberate: a document-processing site earns trust by restraint, not
    by looking like a consumer app. */
 --ink:#0E1B2E;
 --ink2:#000;
 --accent:#123A66;      /* institutional navy — primary brand + UI color */
 --accent2:#0B2A4D;     /* darker navy for hover/active states */
 --accent-rgb:18,58,102;
 --accent-soft:#EAF0F7;
 --seal:#A9812E;        /* gold — reserved for verification/trust signals only */
 --seal-rgb:169,129,46;
 --seal-soft:#F8F1E1;
 --brass:#123A66;
 --tx:#1C2531;
 --tx2:#57657A;
 --tx3:#8590A3;
 --link:#123A66;
 --bg:#FFFFFF;--bg2:#F6F8FB;--bg3:#EDF1F6;--line:#DEE4EC;--line2:#C9D2DE;
 --r:12px;--r-sm:8px;--r-pill:10px;--max:1200px;

 /* ---- Typography tokens ---- */
 /* Single family (Inter) used for everything, carried by weight and scale
    rather than a second display face — the previous heading font
    ('TASA Orbiter') was never actually bundled anywhere in this project,
    so every heading site-wide was silently rendering in Arial. Fixed by
    pointing headings at the Inter files that are already shipped. */
 --f:'Inter','Inter Fallback Arial',Arial,sans-serif;
 --fd:'Inter','Inter Fallback Arial',Arial,sans-serif;
 --fm:Menlo,'San Francisco Mono','Courier New','Roboto Mono',monospace;
 --fu:'Inter','Inter Fallback Arial',Arial,sans-serif;

 /* ---- Blade font-weight tokens ---- */
 --fw-regular:400;--fw-medium:500;--fw-bold:700;

 /* ---- Blade font-size scale (theme.typography.fonts.size.*) ---- */
 --fs-10:.625rem;--fs-11:.6875rem;--fs-12:.75rem;--fs-13:.8125rem;--fs-14:.875rem;
 --fs-15:.9375rem;--fs-16:1rem;--fs-18:1.125rem;--fs-20:1.25rem;--fs-22:1.375rem;
 --fs-24:1.5rem;--fs-28:1.75rem;--fs-32:2rem;--fs-36:2.25rem;--fs-40:2.5rem;

 /* ---- Blade line-height scale (theme.typography.lineHeights.*) ---- */
 --lh-16:1rem;--lh-20:1.25rem;--lh-24:1.5rem;--lh-28:1.75rem;--lh-32:2rem;
 --lh-36:2.25rem;--lh-40:2.5rem;--lh-48:3rem;--lh-56:3.5rem;

 /* Flatter, tighter shadows — a corporate surface sits still, it doesn't glow */
 --sh:0 1px 2px rgba(14,27,46,.04),0 3px 10px rgba(14,27,46,.05);
 --sh-lg:0 2px 6px rgba(14,27,46,.06),0 14px 32px rgba(14,27,46,.09);
 --ease:cubic-bezier(.2,.7,.2,1);
 --pad:20px;
 --danger:#A32C3E;
 --ok:#1D6B45;
 --warn:#8A5A12;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Standard UI Body Default (Blade: size 14 / line-height 24) */
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f);font-weight:var(--fw-regular);
 font-size:var(--fs-14);line-height:var(--lh-24);
 -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 min-height:100vh}
body>*{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
/* Section titles / hero sub-titles → heading family, bold weight */
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:700;line-height:1.18;letter-spacing:-.01em;overflow-wrap:break-word}
h1{font-weight:700}
p{overflow-wrap:break-word}
img,canvas,svg{max-width:100%;display:block}
input,select,textarea{font-family:var(--fu);font-size:16px;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}

/* ---------- NAV ---------- */
/* a thin promo strip above the main bar, Razorpay-style: soft tinted
   banner instead of a dark ops bar */
.utility-bar{background:var(--accent-soft);color:var(--accent2);font-size:12.5px;font-family:var(--fu);
 padding:9px 0;font-weight:600}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.utility-bar a{color:var(--accent2)}
.utility-bar a:hover{color:var(--ink)}
nav{position:sticky;top:0;z-index:70;background:var(--bg);border-bottom:1px solid var(--line);font-family:var(--fu);
 box-shadow:0 1px 0 rgba(31,45,110,.03)}
.nav-in{position:relative}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:20px;flex:none;color:var(--ink)}
.brand .sq{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none}
.brand .sq svg{width:32px;height:32px;display:block}
.navlinks{display:flex;gap:2px;align-items:center}
.navlinks a{padding:9px 16px;font-size:var(--fs-14);font-weight:var(--fw-medium);color:var(--tx2);border-radius:var(--r-pill);transition:.15s;white-space:nowrap;position:relative}
.navlinks a:hover{color:var(--accent);background:var(--accent-soft)}
.navlinks a.on{color:var(--accent);background:var(--accent-soft)}
.navlinks a.on::after{content:none}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--bg2);align-items:center;justify-content:center;font-size:18px;flex:none}

/* ---------- BUTTONS — squared, bordered; a form, not a bubble ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:var(--fw-medium);font-size:var(--fs-14);font-family:var(--fu);
 padding:12px 24px;border-radius:var(--r-pill);transition:.2s var(--ease);border:1.5px solid transparent;letter-spacing:-.005em;
 white-space:nowrap;min-height:44px}
.btn-solid{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(var(--accent-rgb),.12),0 4px 10px rgba(var(--accent-rgb),.14)}
.btn-solid:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 2px 4px rgba(var(--accent-rgb),.16),0 8px 18px rgba(var(--accent-rgb),.18)}
.btn-solid:active{transform:translateY(0)}
.btn-solid:disabled{opacity:.32;cursor:not-allowed;transform:none;box-shadow:none}
.btn-out{background:var(--bg);color:var(--ink);border-color:var(--line2)}
.btn-out:hover{border-color:var(--accent);color:var(--accent);background:var(--bg2)}
.btn-soft{background:var(--bg2);color:var(--ink);border:1.5px solid var(--line)}
.btn-soft:hover{background:var(--bg3);border-color:var(--line2)}
.btn-lg{padding:15px 32px;font-size:16px;min-height:52px}
.btn-sm{padding:8px 18px;font-size:12.5px;min-height:36px}

/* ---------- BITS ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px;font-weight:600;
 padding:6px 11px;border-radius:var(--r-sm);background:var(--bg2);color:var(--tx2);letter-spacing:.02em}
.badge-dark{background:var(--ink);color:#fff}
.badge-line{background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.16));
 border:1px solid rgba(var(--accent-rgb),.30);color:var(--accent);font-weight:700;
 box-shadow:0 2px 12px rgba(var(--accent-rgb),.14);padding:8px 14px 8px 12px}
.badge-line .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:none;
 box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:badgePulse 2s infinite}
@keyframes badgePulse{
 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
 70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-13);font-weight:var(--fw-bold);
 letter-spacing:0;text-transform:none;color:var(--accent);margin-bottom:14px}
.eyebrow::before{content:none}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.2s var(--ease)}
.card-h{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card-h:hover{border-color:var(--line2);box-shadow:0 8px 20px rgba(14,27,46,.08);transform:translateY(-2px)}
.card-flat{background:var(--bg2);border:none}
.sect{padding:64px 0}
.sect-alt{background:var(--bg2)}
.sect-head{margin-bottom:30px;max-width:660px}
.sect-head h2{font-size:clamp(24px,4vw,36px)}
.sect-head p{color:var(--tx2);margin:12px 0 0;font-size:var(--fs-16);line-height:var(--lh-24)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- catalog code — the signature device ----------
   Every tool/section can carry a DEPT-NN tag the way a course
   catalog assigns 6.006, 18.06. It's generated in app.js from
   each tool's category, so it encodes a real grouping, not a
   decorative sequence. */
.catcode{display:inline-flex;align-items:center;font-family:var(--fm);font-size:11px;font-weight:600;
 letter-spacing:.03em;color:var(--accent);background:#fff;border:1px solid var(--line2);
 border-radius:var(--r-sm);padding:3px 7px}

/* ---------- GRID HELPERS ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.auto-220{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.auto-168{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px}
.auto-268{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.split-l{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px}
.split-r{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;align-items:start}
.split-d{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}

/* ---------- FOOTER — light, Razorpay-style: white background, thin
   accent top border, columns of muted links rather than a dark app bar ---------- */
footer{background:var(--bg2);color:var(--tx);padding:52px 0 26px;border-top:1px solid var(--line)}
footer .brand{color:var(--ink)}
.foot-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:30px;margin-bottom:34px}
.foot-g h5{font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);margin-bottom:14px;font-weight:600}
.foot-g a{display:block;padding:5px 0;color:var(--tx2);font-size:14px;overflow-wrap:break-word}
.foot-g a:hover{color:var(--accent)}
.foot-g p{color:var(--tx2);font-size:14px;margin:0}
.foot-bot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--tx3);font-family:var(--fm);font-size:11.5px}
::selection{background:var(--accent);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   OVERFLOW CONTAINMENT  —  read this before changing it
   ---------------------------------------------------------
   Do NOT put `overflow-x:hidden` on <html> (or on html+body).
   Per spec, when one overflow axis is not `visible` the other
   computes to `auto`. That turns <html> into a scrolling AND
   clipping context, which:
     - makes `position:fixed` resolve against <html>, not the
       viewport, so fixed bars land mid-page instead of pinned
     - clips everything past the first viewport height, so the
       page reserves its full height but paints nothing below
   Both symptoms only appear once the page is tall and narrow,
   which is why desktop looked fine and mobile went blank.

   Overflow is instead prevented at the source: grid/flex items
   default to `min-width:auto`, and that — not the page — is what
   actually pushes layouts wide. `min-width:0` fixes it properly.
   ========================================================= */
:where(.wrap,.card,.kv,.foot-g,.split,.split-l,.split-r,.split-d,.g2,.g4,
       .auto-220,.auto-168,.auto-268,.foot-bot,.hero-actions,.nav-in)>*{min-width:0}
p,li,td,h1,h2,h3,h4,b,span,a{overflow-wrap:break-word}
a[href^="mailto:"],.foot-g a,code{overflow-wrap:anywhere}
img,canvas,svg,video,iframe{max-width:100%;height:auto}
input,select,textarea{font-size:16px;max-width:100%}   /* <16px makes iOS zoom on focus */

/* ---- key/value rows: label left, value right ---- */
.kv{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px}
.kv>*:first-child{flex:1 1 auto}
.kv>*:last-child{text-align:right;flex:0 1 auto;overflow-wrap:anywhere}

/* =========================================================
   RESPONSIVE  —  one block per breakpoint, widest first.
   ========================================================= */
@media(max-width:1100px){
  :root{--pad:18px}
  .split{gap:32px}
  .foot-g{grid-template-columns:1.5fr 1fr 1fr;gap:26px}
  .foot-g>div:nth-child(4){grid-column:1/-1}
}
.mobnav{display:none}
@media(max-width:900px){
  .utility-bar{display:none}
  .split,.split-l,.split-r,.split-d{grid-template-columns:1fr;gap:26px}
  .sect{padding:52px 0}
  .burger{display:flex}
  .navlinks{
    position:absolute;top:100%;left:0;right:0;z-index:69;
    display:none;flex-direction:column;align-items:stretch;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:10px;box-shadow:var(--sh-lg);
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:14px 16px;border-radius:var(--r-sm)}
  .navlinks a.on::after{display:none}
  .mobnav{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:sticky;bottom:0;z-index:65;
    background:var(--bg);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobnav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:8px 2px;border-radius:var(--r-sm);color:var(--tx3);
    font-size:11px;font-weight:600;min-height:52px;
  }
  .mobnav a svg{width:22px;height:22px}
  .mobnav a.on{color:var(--accent)}
  .mobnav a:active{background:var(--bg2)}
  .bar{bottom:0}
  .ws-body{padding-bottom:190px}
  .toast{bottom:150px}
}
@media(max-width:760px){
  .g2{grid-template-columns:1fr}
  .foot-g{grid-template-columns:1fr 1fr}
  .foot-g>div:nth-child(1){grid-column:1/-1}
}
@media(max-width:560px){
  :root{--pad:16px;--r:10px}
  body{font-size:14.5px}
  .sect{padding:38px 0}
  .sect-head{margin-bottom:20px}
  .sect-head h2{font-size:22px}
  .sect-head p{font-size:14.5px}
  .card{padding:16px;border-radius:8px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-g{grid-template-columns:1fr;gap:24px}
  .foot-g>div:nth-child(1){grid-column:auto}
  .foot-bot{flex-direction:column;gap:8px}
  .btn{width:100%}
  .btn-inline{width:auto}
  .btn-lg.btn-inline{width:100%}
  .hero-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .kv{flex-direction:column;align-items:flex-start;gap:2px}
  .kv>*:last-child{text-align:left;font-weight:700}
}
@media(max-width:380px){
  :root{--pad:14px}
  .g4{grid-template-columns:1fr 1fr;gap:7px}
  .card{padding:14px}
  .badge{font-size:10.5px;padding:5px 9px}
  .brand{font-size:17px}
  .brand .sq{width:30px;height:30px;font-size:15px}
  .nav-in{height:58px}
}

/* ---------- form fields — squared, crimson focus ---------- */
input:where(:not([type=range]):not([type=checkbox]):not([type=radio])),select,textarea{
  border:1.5px solid var(--line2);border-radius:var(--r-sm);background:#fff;padding:12px 14px;color:var(--tx);transition:.15s}
input:where(:not([type=range])):focus,select:focus,textarea:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16)}
input[type=range]{accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.link,a.link{color:var(--link);text-decoration-thickness:1px}
.link:hover{text-decoration:underline}
.seg .on,.tab.on,[role=tab][aria-selected=true]{background:var(--accent);color:#fff}

/* WhatsApp CTA — kept as brand-native green, it's the one exception (recognisable outside the site) */
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1eb85a;transform:translateY(-1px);box-shadow:0 8px 22px rgba(37,211,102,.28)}
.btn-wa svg{width:17px;height:17px}

/* ---------- hero backdrop: a faint ledger/graph-paper grid instead of a
   colourful gradient blob — grounded in the "document" subject matter
   rather than a generic SaaS decoration, and quiet enough to never
   compete with the headline. ---------- */
body{position:relative}
header{position:relative}
header.hero-glow{overflow:hidden}
header.hero-glow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(18,58,102,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,58,102,.06) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 85%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 85%)}
header.hero-glow::after{content:none}
header.hero-glow .wrap{position:relative;z-index:1}
/* two-tone hero headline, e.g. <h1>This tool <span class="accent-text">just works</span></h1> */
.accent-text{color:var(--seal)}

/* favourite star on tool cards */
.tool{position:relative}
.fav-btn{position:absolute;top:-9px;left:-9px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:#c4bcae;
  background:#fff;border:1px solid var(--line);box-shadow:0 2px 5px rgba(31,45,110,.10);z-index:2;transition:.15s}
.fav-btn:hover{border-color:var(--brass);color:var(--brass);transform:scale(1.08)}
.fav-btn.on{color:var(--brass);border-color:#e3cf99;background:#fdf9ee}

/* ---- Blog ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}
.blog-card{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.2s}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(var(--accent-rgb),.12);border-color:var(--accent)}
.blog-cover{height:140px;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--bg2)}
.blog-body{padding:18px 18px 20px}
.blog-tag{display:inline-block;font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:#f4e9ed;padding:4px 9px;border-radius:var(--r-sm);margin-bottom:10px}
.blog-body h3{font-size:17px;margin-bottom:6px;letter-spacing:0}
.blog-body p{color:var(--tx2);font-size:13.5px;line-height:1.5;margin:0;font-family:var(--f)}
.blog-meta{color:var(--tx3);font-family:var(--fm);font-size:11.5px;margin-top:12px}
.article{max-width:720px;margin:0 auto;padding:36px 20px 60px}
.article .eyebrow{display:block;margin-bottom:10px}
.article h1{font-size:clamp(28px,4.4vw,42px);letter-spacing:-.01em;margin-bottom:10px}
.article .meta{color:var(--tx3);font-family:var(--fm);font-size:12px;margin-bottom:28px}
.article h2{font-size:23px;margin:32px 0 12px;letter-spacing:0}
.article p{color:var(--tx2);font-size:16px;line-height:1.75;margin:0 0 16px;font-family:var(--f)}
.article ul,.article ol{color:var(--tx2);font-size:16px;line-height:1.75;margin:0 0 16px;padding-left:22px}
.article li{margin-bottom:6px}
.article .cta-box{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:22px 24px;margin:28px 0;text-align:center}
.article .cta-box h3{font-size:18px;margin-bottom:6px}
.article .cta-box p{margin-bottom:16px}

/* ---- About page: services grid + tech stack pills ---- */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.g3{grid-template-columns:1fr}}
.svc-card{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#fff;transition:.2s}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(var(--accent-rgb),.10);border-color:var(--accent)}
.svc-ico{width:44px;height:44px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:21px;
  background:var(--bg2);margin-bottom:12px}
.svc-card b{font-family:var(--fd);font-weight:700;font-size:16px;display:block;margin-bottom:5px}
.svc-card p{color:var(--tx2);font-size:13.5px;margin:0;line-height:1.5}
.tech-wrap{display:flex;flex-wrap:wrap;gap:10px}
.tech-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:9px 16px 9px 12px;font-weight:600;font-family:var(--fm);font-size:12.5px;color:var(--tx);transition:.15s}
.tech-pill:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(31,45,110,.08)}
.tech-pill i{width:10px;height:10px;border-radius:2px;flex:none}
.svc-ico{background:none;padding:0;box-shadow:none}
.svc-ico svg{width:44px;height:44px;display:block}
.tech-pill{padding:8px 16px 8px 10px}
.tech-pill svg{width:20px;height:20px;flex:none;display:block}

/* ---- neat wrapping fix: an odd item count (7 categories, 4 blog
   posts) used to leave one card stranded alone in the last row with
   a big empty gap beside it. Making that last card span the full
   row width turns it into an intentional-looking closing tile
   instead of a layout mistake, at every screen size. ---------- */
#catgrid>a:last-child{grid-column:1/-1;display:flex;align-items:center;gap:16px;text-align:left;padding:16px 20px}
#catgrid>a:last-child div:first-child{font-size:24px}
#catgrid>a:last-child h3,#catgrid>a:last-child p{margin:0}
@media(min-width:901px){
  .blog-grid>a:last-child:nth-child(3n+1){grid-column:1/-1}
  .blog-grid>a:last-child:nth-child(3n+1) .blog-cover{height:100px}
}

/* ---- R Sri Ram's other work: About / Books / Finance / Interior
   Design form their own small cluster of pages, so they get a slim
   pill sub-nav to move between them without cluttering the main
   site nav (which every PDF-tool page shares and should stay about
   PDF tools). ---------- */
.subnav{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0 6px}
.subnav a{padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--tx2);background:var(--bg2);border:1.5px solid transparent;transition:.15s}
.subnav a:hover{color:var(--accent);border-color:var(--accent)}
.subnav a.on{background:var(--ink);color:#fff}

/* ---- Disclaimer / notice callout (used on the Finance page) ---- */
.notice{display:flex;gap:14px;align-items:flex-start;background:#FFF8E8;
  border:1.5px solid #F3D98B;border-radius:var(--r);padding:18px 20px;margin:22px 0}
.notice svg{flex:none;width:22px;height:22px;margin-top:1px}
.notice b{display:block;font-size:14.5px;margin-bottom:4px;color:#7A5B00;font-family:var(--fd)}
.notice p{margin:0;font-size:13.5px;color:#5c4600;line-height:1.65}
.notice p+p{margin-top:8px}

/* ---- "what I do" hub cards on the About page ---- */
.hub-card{display:block;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  background:#fff;transition:.2s var(--ease)}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--accent)}
.hub-card .hub-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin-bottom:14px}
.hub-card b{font-family:var(--fd);font-weight:700;font-size:16.5px;display:block;margin-bottom:6px;color:var(--ink)}
.hub-card p{color:var(--tx2);font-size:13.5px;margin:0 0 10px;line-height:1.55}
.hub-card span.go{font-size:13px;font-weight:700;color:var(--accent)}