/*
========================================================================
 PIPE FLOW SOFTWARE - 2026 SITE STYLE, ITERATION 3
 ------------------------------------------------------------------------
 Load AFTER the existing /css/pipeflow.css, with <body class="pf2026">.
 Same contract as iterations 1 and 2: everything is scoped to
 body.pf2026, the page content keeps its existing class names, and new
 markup outside #content uses its own prefixes:

   pfh-   site header and menus
   pfx-   product section header + grouped section menu
   pfc-   new content components (used on the redesigned home page only)
   pff-   footer

 Design notes (from pipeflow-homepage-v2.html, applied site-wide)
   - Archivo for headings and buttons, Inter for reading text,
     IBM Plex Mono for readouts: numbers, captions, tags, the breadcrumb.
   - Blueprint grid paper behind the home hero and product headers.
   - The "flowline": a thin rule ending in a blue arrowhead, used for
     every <hr> and p.sectiondivider, and on "Next:" links.
   - Navy ink, engineering blue links, bright blue trial / buy buttons
     starting from the logo blue (#1884FF). Button text is white, bold
     and at least 18.7px (WCAG "large text", 3:1 needed; the gradient
     gives 3.6:1 to 4.6:1). The orange (--pf-flame) is used only where
     there is no text.
   - Each program keeps an identification colour (--pf-prod).

 Keep this file ASCII-only.
========================================================================
*/

/* Fonts, self-hosted (26 Oct 2026): Archivo, Inter, IBM Plex Mono (SIL Open
   Font License 1.1), latin + latin-ext, in /css/fonts/ next to this file
   (v3/css/fonts/ here). Was Google Fonts. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/archivo-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/archivo-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/inter-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/inter-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

body.pf2026{
  --pf-ink:#0E1B2A;
  --pf-navy:#0E1B2A;
  --pf-body:#2A3744;
  --pf-muted:#5C6B7A;
  --pf-blue:#0F5FA6;
  --pf-blue-d:#0B4880;
  --pf-tint:rgba(15,95,166,.08);
  --pf-paper:#F4F7FA;
  --pf-line:#D5DEE7;
  /* trial / buy buttons: bright blue gradient from the logo blue, white
     bold text (keep the text at 1.17rem bold or larger, or the bright
     blue fails for readability) */
  /* buttons (option K, chosen 26 Oct): solid bright blue with white text;
     on hover white with a blue edge and blue text (the Prices-button hover).
     #1570EF with white is 4.6:1, readable at this size. */
  --pf-cta:#1570EF;
  --pf-cta-fill:none;
  --pf-cta-fill-h:none;
  --pf-cta-edge:#1570EF;
  --pf-cta-ink:#fff;
  --pf-cta-font:700 1.05rem/1.1 var(--pf-display);
  --pf-btn-h:#fff;
  --pf-btn-h-ink:#1570EF;
  --pf-btn-h-edge:#1570EF;
  --pf-btn-lift:0 8px 18px -10px rgba(14,27,42,.35);
  --pf-flame:#E07B1A;

  /* program identification colours */
  --pf-expert:#298CFF;  /* blue (the logo blue) */
  --pf-wizard:#E8742A;  /* orange */
  --pf-advisor:#E0457B; /* pinky red */
  --pf-convert:#0F5FA6; /* darker blue */
  --pf-apps:#2BA824;    /* green */
  /* the user's program colours, as on the box shots. Used for lines only
     (current section tab, home page cards), never text.
     The Products menu circles repeat them inside their SVG pictures. */

  --pf-display:'Archivo',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --pf-text:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --pf-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --pf-grid:linear-gradient(var(--pf-line) 1px,transparent 1px),linear-gradient(90deg,var(--pf-line) 1px,transparent 1px);
  --pf-wrap:1128px;
  --pf-read:780px;
  --pf-gutter:24px;
  --pf-r:8px;
  --pf-shadow:0 18px 40px -18px rgba(14,27,42,.45);
  --pf-foot:#505B66; /* footer grey: white text on it is 6.9:1 */
  --pf-h2:var(--pf-h1); /* dark slate grey like the h1 (was navy var(--pf-ink)); the original site's h2 blue was #1D77FF */
  --pf-h1:#37434F; /* dark slate grey, also used for h2 and h3 (#2F3A45 if it needs to be darker) */
  /* the round symbol from the Pipe Flow logo: blue ring, white middle, black chevron */
  --pf-logo-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' stroke='%23298CFF' stroke-width='5'/%3E%3Cpath d='M41 21l27 29-27 29' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  margin:0;padding:0;background:#fff;color:var(--pf-body);
  font-family:var(--pf-text);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:clip; /* full-width bands on the home page use 100vw */
}

/* undo the old global link and form decoration */
.pf2026 a:link,.pf2026 a:visited{background:none;padding-bottom:0;}
.pf2026 a:hover,.pf2026 a:active{background-color:transparent;}
.pf2026 form{background:transparent;}
.pf2026 :focus-visible{outline:3px solid rgba(15,95,166,.45);outline-offset:2px;}

.pf-wrap{max-width:var(--pf-wrap);margin:0 auto;padding:0 var(--pf-gutter);box-sizing:border-box;}
.pf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.pf2026 a.pf-skip:link,.pf2026 a.pf-skip:visited{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--pf-ink);color:#fff;padding:.6rem 1rem;}
.pf2026 a.pf-skip:focus{left:8px;top:8px;}

/* product colour hook: set --pf-prod on any element */
.pf-p-expert{--pf-prod:var(--pf-expert);}
.pf-p-wizard{--pf-prod:var(--pf-wizard);}
.pf-p-advisor{--pf-prod:var(--pf-advisor);}
.pf-p-convert{--pf-prod:var(--pf-convert);}
.pf-p-apps{--pf-prod:var(--pf-apps);}

/* the pipe marker: a colour band with a flow chevron */
.pf-marker{
  display:inline-block;flex:0 0 auto;width:26px;height:14px;border-radius:3px;
  background:var(--pf-prod,var(--pf-blue));position:relative;vertical-align:middle;
}
.pf-marker::after{
  content:"";position:absolute;left:9px;top:3px;width:6px;height:6px;
  border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg);
}

/* buttons (header, section header, new content) */
.pf2026 a.pf-btn:link,.pf2026 a.pf-btn:visited,.pf2026 button.pf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-height:42px;padding:.68rem 1.2rem;
  border:1.5px solid var(--pf-line);border-radius:6px;background:#fff;
  font:600 1.02rem/1.1 var(--pf-display);color:var(--pf-ink);text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s;
}
.pf2026 a.pf-btn:hover,.pf2026 button.pf-btn:hover{border-color:var(--pf-btn-h-edge);color:var(--pf-btn-h-ink);transform:translateY(-1px);box-shadow:var(--pf-btn-lift);}
.pf2026 a.pf-btn:active,.pf2026 button.pf-btn:active{transform:none;box-shadow:none;}
.pf2026 a.pf-btn:focus-visible,.pf2026 button.pf-btn:focus-visible{outline:3px solid rgba(21,112,239,.35);outline-offset:2px;}
.pf2026 a.pf-btn-cta:link,.pf2026 a.pf-btn-cta:visited,.pf2026 button.pf-btn-cta{
  background:var(--pf-cta) var(--pf-cta-fill);border-color:var(--pf-cta-edge);color:var(--pf-cta-ink);
  font:var(--pf-cta-font);text-shadow:none;
}
.pf2026 a.pf-btn-cta:hover,.pf2026 button.pf-btn-cta:hover{background:var(--pf-btn-h);border-color:var(--pf-btn-h-edge);color:var(--pf-btn-h-ink);}
.pf2026 a.pf-btn-ghost:link,.pf2026 a.pf-btn-ghost:visited{background:none;border-color:transparent;color:var(--pf-blue);padding-left:.4rem;padding-right:.4rem;}
.pf2026 a.pf-btn-ghost:hover{border-color:transparent;text-decoration:underline;transform:none;box-shadow:none;}
.pf2026 a.pf-btn-light:link,.pf2026 a.pf-btn-light:visited{background:transparent;border-color:rgba(255,255,255,.45);color:#fff;}
.pf2026 a.pf-btn-light:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff;box-shadow:none;}

/* =====================================================================
   HEADER
===================================================================== */
.pfh{
  position:sticky;top:0;z-index:500;background:#fff;
  border-top:6px solid var(--pf-expert); /* the logo blue band along the very top, as on the original site */
  border-bottom:1px solid var(--pf-line);
}
.pfh-inner{display:flex;align-items:center;gap:1.75rem;min-height:74px;}
.pf2026 a.pfh-logo:link,.pf2026 a.pfh-logo:visited{display:block;flex:0 0 auto;line-height:0;}
.pfh-logo img{height:44px;width:auto;display:block;}

.pfh-nav{flex:1 1 auto;}
.pfh-list{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:.15rem;}
.pfh-item{position:relative;margin:0;padding:0;}

.pf2026 .pfh-top,
.pf2026 a.pfh-top:link,
.pf2026 a.pfh-top:visited{
  display:flex;align-items:center;gap:.4rem;height:74px;box-sizing:border-box;
  margin:0;padding:0 .85rem;border:0;background:none;cursor:pointer;
  font:600 1rem/1 var(--pf-display);color:var(--pf-ink);text-decoration:none;
}
.pf2026 .pfh-top:hover,.pf2026 a.pfh-top:hover, /* a.pfh-top: Downloads, a link not a button */
.pf2026 .pfh-item.is-open > .pfh-top{color:var(--pf-blue);}
.pfh-chev{
  width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);
}
.pfh-item.is-open .pfh-chev{transform:rotate(-135deg);margin-top:3px;}
body[data-section="products"] .pfh-item[data-nav="products"] > .pfh-top,
body[data-section="downloads"] .pfh-item[data-nav="downloads"] > .pfh-top,
body[data-section="buy"] .pfh-item[data-nav="buy"] > .pfh-top,
body[data-section="support"] .pfh-item[data-nav="support"] > .pfh-top,
body[data-section="company"] .pfh-item[data-nav="company"] > .pfh-top{
  color:var(--pf-blue);box-shadow:inset 0 -2px 0 var(--pf-blue);
}

/* dropdown panels */
.pfh-drop{
  display:none;position:absolute;top:calc(100% - 6px);left:0;z-index:600;min-width:270px;
  background:#fff;border:1px solid var(--pf-line);border-top:3px solid var(--pf-blue);border-radius:var(--pf-r);
  box-shadow:var(--pf-shadow);padding:.5rem;box-sizing:border-box;
}
.pfh-item.is-open > .pfh-drop{display:block;}
html:not(.pf-js) .pfh-item:hover > .pfh-drop,
html:not(.pf-js) .pfh-item:focus-within > .pfh-drop{display:block;}
.pfh-drop ul{list-style:none;margin:0;padding:0;}
.pfh-drop li{margin:0;padding:0;}
.pf2026 .pfh-drop a:link,.pf2026 .pfh-drop a:visited{
  display:block;padding:.55rem .8rem;border-radius:6px;
  color:var(--pf-ink);text-decoration:none;font-size:.95rem;line-height:1.35;
}
.pf2026 .pfh-drop a:hover{background:var(--pf-paper);color:var(--pf-blue);}
.pfh-sep{height:1px;background:var(--pf-line);margin:.4rem .8rem;}

/* products panel: the programs in one column, "Getting started" beside it */
.pfh-mega{
  width:min(765px,calc(100vw - 32px));
  padding:1rem;grid-template-columns:1fr 240px;gap:.1rem 1.25rem;
}
.pfh-item.is-open > .pfh-mega{display:grid;}
html:not(.pf-js) .pfh-item-mega:hover > .pfh-mega,
html:not(.pf-js) .pfh-item-mega:focus-within > .pfh-mega{display:grid;}
.pf2026 .pfh-mega a.pfh-prod:link,.pf2026 .pfh-mega a.pfh-prod:visited{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .85rem;align-items:center;padding:.8rem;
}
.pfh-prod .pf-marker{grid-row:1 / span 2;}
/* products menu: each program marked with the logo's round symbol, the ring
   in that program's colour (black chevron, white middle) */
.pfh-prod .pf-marker{
  width:26px;height:26px;border-radius:0;background:var(--pf-logo-circle) center / 100% 100% no-repeat;
}
.pfh-prod .pf-marker::after{display:none;}
.pfh-prod.pf-p-expert .pf-marker{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' stroke='%23298CFF' stroke-width='5'/%3E%3Cpath d='M41 21l27 29-27 29' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} /* logo blue */
.pfh-prod.pf-p-wizard .pf-marker{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' stroke='%23E8742A' stroke-width='5'/%3E%3Cpath d='M41 21l27 29-27 29' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} /* orange */
.pfh-prod.pf-p-advisor .pf-marker{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' stroke='%23E0457B' stroke-width='5'/%3E%3Cpath d='M41 21l27 29-27 29' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} /* pinky red */
.pfh-prod.pf-p-apps .pf-marker{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' stroke='%232BA824' stroke-width='5'/%3E%3Cpath d='M41 21l27 29-27 29' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} /* green */
.pfh-prod.pf-p-convert .pf-marker{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' stroke='%230F5FA6' stroke-width='5'/%3E%3Cpath d='M41 21l27 29-27 29' fill='none' stroke='%23000' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} /* darker blue */
.pfh-prod b{font:700 1.02rem/1.3 var(--pf-display);color:var(--pf-ink);}
.pfh-prod span{font-size:.88rem;color:var(--pf-muted);line-height:1.4;}
.pf2026 .pfh-mega a.pfh-prod:hover b{color:var(--pf-blue);}
.pfh-mega-side{grid-column:2;grid-row:1 / span 5;border-left:1px solid var(--pf-line);padding-left:1.25rem;}
.pfh-mega-side h2{
  clear:none;background:none;padding:.8rem .8rem .4rem;margin:0;
  font:500 .72rem/1.3 var(--pf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-blue);
}

/* header actions */
.pfh-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;}
.pfh-icon{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  height:42px;min-width:42px;padding:0 .55rem;box-sizing:border-box;
  border:0;border-radius:var(--pf-r);background:none;color:var(--pf-ink);cursor:pointer;
  font:500 .9rem/1 var(--pf-text);
}
.pf2026 a.pfh-icon:link,.pf2026 a.pfh-icon:visited{color:var(--pf-ink);text-decoration:none;}
.pf2026 .pfh-icon:hover{background:var(--pf-paper);color:var(--pf-blue);}
.pfh-count{font:500 .82rem/1 var(--pf-mono);color:var(--pf-muted);}

.pfh-toggle{display:none;}
.pfh-burger,.pfh-burger::before,.pfh-burger::after{
  display:block;width:20px;height:2px;background:var(--pf-ink);border-radius:2px;position:relative;transition:transform .2s,background .2s;
}
.pfh-burger::before,.pfh-burger::after{content:"";position:absolute;left:0;}
.pfh-burger::before{top:-6px;}
.pfh-burger::after{top:6px;}
.pfh-toggle[aria-expanded="true"] .pfh-burger{background:transparent;}
.pfh-toggle[aria-expanded="true"] .pfh-burger::before{transform:translateY(6px) rotate(45deg);}
.pfh-toggle[aria-expanded="true"] .pfh-burger::after{transform:translateY(-6px) rotate(-45deg);}

/* search panel (opens below the header) */
.pfh-search{border-top:1px solid var(--pf-line);background:var(--pf-paper);padding:1rem 0;}
.pfh-search[hidden]{display:none;}
.pfh-search form{display:flex;gap:.5rem;max-width:640px;margin:0;padding:0;position:static;}
.pf2026 .pfh-search input[type=search]{
  flex:1 1 auto;min-width:0;height:46px;box-sizing:border-box;margin:0;left:0;
  border:1px solid #AFBCCB;border-radius:6px;padding:0 .9rem;
  font:400 1rem var(--pf-text);color:var(--pf-ink);background:#fff;
}
.pf2026 .pfh-search input[type=search]:focus{outline:3px solid rgba(15,95,166,.3);border-color:var(--pf-blue);}
.pfh-nav-extra{display:none;}
.pfh-nav-section{display:none;} /* phone/tablet menu only (added by the JS) */

/* =====================================================================
   BREADCRUMB
===================================================================== */
.pfb{background:#fff;}
.pf2026 #breadcrumb{
  position:static;height:auto;min-width:0;max-width:var(--pf-wrap);margin:0 auto;
  padding:.9rem var(--pf-gutter) 0;box-sizing:border-box;background:none;text-indent:0;
  font:400 .8rem/1.4 var(--pf-mono);color:var(--pf-muted);
}
.pf2026 #breadcrumb a:link,.pf2026 #breadcrumb a:visited{color:var(--pf-muted);text-decoration:none;background:none;}
.pf2026 #breadcrumb a:hover{color:var(--pf-blue);text-decoration:underline;background:none;}
.pf2026 #breadcrumb nobr:last-child a:link,.pf2026 #breadcrumb nobr:last-child a:visited{color:var(--pf-ink);}
/* no breadcrumb bar on the home page. Its breadcrumb is only "Pipe Flow
   Software >> Pipe Flow Software" (the home page is called pipe-flow-software
   in the CMS), so: hide it when it has one item, or two with the second
   being the home page itself */
.pf2026 .pfb:not(:has(nobr + nobr)),
.pf2026 .pfb:has(nobr:nth-child(2):last-child a[href$="/pipe-flow-software"]){display:none;}
.pf2026 .pfx.pfx-home{margin-top:0;} /* the optional home page section header */
/* no breadcrumb on the PHP pages under /public/ (pf-nocrumb, set in the page head) */
.pf-nocrumb .pf2026 .pfb,.pf-nocrumb .pf2026 #breadcrumb{display:none;}
.pf-nocrumb .pf2026 .pfb + .pfx{margin-top:0;}
/* pages with a section header: the script moves the breadcrumb into its
   top right corner, above the buttons, and hides the empty bar */
.pf2026 .pfb.is-moved{display:none;}
.pf2026 .pfb.is-moved + .pfx{margin-top:0;}
.pfx-head.has-crumb{position:relative;padding-top:2.6rem;}
.pf2026 .pfx-head #breadcrumb{
  position:absolute;top:.85rem;right:var(--pf-gutter);left:auto;max-width:none;width:auto;
  margin:0;padding:0;font-size:.7rem;line-height:1.3;text-align:right;white-space:nowrap;
}

/* =====================================================================
   PRODUCT SECTION HEADER + GROUPED SECTION MENU
   (replaces the old context-aware left menu)
===================================================================== */
.pfx{
  position:relative;margin-top:.9rem;
  background-color:var(--pf-paper);background-image:var(--pf-grid);background-size:28px 28px;
  border-top:1px solid var(--pf-line);border-bottom:1px solid var(--pf-line);
}
.pfx::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--pf-paper) 25%,rgba(244,247,250,.82) 60%,rgba(244,247,250,.55));
}
.pfx > *{position:relative;}
.pfx-head{display:flex;align-items:center;gap:1.25rem;padding-top:1.3rem;padding-bottom:1rem;}
.pfx-id{flex:1 1 0;min-width:0;}
.pfx-name{margin:0;display:flex;align-items:center;gap:.6rem;font:800 1.45rem/1.15 var(--pf-display);letter-spacing:-.01em;}
.pf2026 .pfx-name a:link,.pf2026 .pfx-name a:visited{color:var(--pf-ink);text-decoration:none;}
/* section icon: one minimalist line icon per section, in front of the name
   and tagline, on no background. All icons follow one style so they read
   as a set: 24-unit grid, 1.5 stroke, round ends and joins, outline only,
   grey #5C6B7A (5:1 on the header background), as few lines as possible.
   To add a section: draw its icon in the same style and add a rule below
   with its top-level page name. */
.pfx-icon{
  display:block;flex:0 0 auto;width:44px;height:44px;
  background:center / 100% 100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7zM14 3v4h4'/%3E%3C/svg%3E");
}
/* tank piped round to a pump (pipe networks) */
.pfx[data-section="pipe-flow-expert-software"] .pfx-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.5' width='6' height='7.5' rx='1'/%3E%3Ccircle cx='18' cy='16.5' r='3'/%3E%3Cpath d='M9 6h6.5A2.5 2.5 0 0 1 18 8.5v5M15 16.5H8.5A2.5 2.5 0 0 1 6 14v-3'/%3E%3C/svg%3E");}
/* single flanged pipe with a pressure gauge */
.pfx[data-section="pipe-flow-wizard-software"] .pfx-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h16M4 18h16M4 11.5v8M20 11.5v8M12 13v-2.5'/%3E%3Ccircle cx='12' cy='7' r='3.5'/%3E%3C/svg%3E");}
/* open channel / tank with water */
.pfx[data-section="pipe-flow-advisor-software"] .pfx-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5v13.5h16V5'/%3E%3Cpath d='M6.5 12c1.2-1.2 2.3-1.2 3.5 0s2.3 1.2 3.5 0 2.3-1.2 3.5 0'/%3E%3C/svg%3E");}
/* two-way arrows (unit conversion) */
.pfx[data-section="convert-123-units-conversions-software"] .pfx-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5h14M15.5 5L19 8.5 15.5 12M19 15.5H5M8.5 12L5 15.5 8.5 19'/%3E%3C/svg%3E");}
/* phone with a water drop */
.pfx[data-section="pipe-flow-mobile-apps"] .pfx-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M12 9c-1.5 2-2.2 3.2-2.2 4.2a2.2 2.2 0 0 0 4.4 0c0-1-.7-2.2-2.2-4.2z'/%3E%3C/svg%3E");}
/* pressure gauge dial */
.pfx[data-section="pipe-pressure-drop-calculations"] .pfx-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 18.5A8 8 0 1 1 17.7 18.5'/%3E%3Cpath d='M12 13l3.5-3.5'/%3E%3C/svg%3E");}
/* house (the home page, when its section header is switched on) */
.pfx[data-section="home"] .pfx-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11L12 4l8 7v9H4zM10 20v-5h4v5'/%3E%3C/svg%3E");}
.pfx-desc{margin:.25rem 0 0;color:var(--pf-muted);font-size:.95rem;line-height:1.4;}
.pfx-actions{display:flex;gap:.6rem;flex:0 0 auto;}

.pfx-nav{position:relative;}
.pfx-toggle{display:none;}
.pfx-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:.25rem;} /* one row; the script moves what does not fit into More */
.pfx-item{position:relative;margin:0;padding:0;}
.pf2026 .pfx-top,
.pf2026 a.pfx-top:link,
.pf2026 a.pfx-top:visited{
  display:flex;align-items:center;gap:.4rem;margin:0;padding:.7rem .9rem .8rem;
  border:0;background:none;cursor:pointer;
  font:600 .95rem/1.2 var(--pf-display);color:var(--pf-body);text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 -3px 0 transparent;
}
.pf2026 .pfx-top:hover,.pf2026 a.pfx-top:hover,.pf2026 .pfx-item.is-open > .pfx-top{color:var(--pf-blue);box-shadow:inset 0 -3px 0 var(--pf-line);}
/* the current tab keeps dark text and its coloured underline, also on hover */
.pf2026 .pfx-item.is-current > .pfx-top,.pf2026 .pfx-item.is-current > a.pfx-top:hover{color:var(--pf-ink);box-shadow:inset 0 -3px 0 var(--pf-prod,var(--pf-blue));}
.pfx-here{font:400 .9rem/1.2 var(--pf-text);color:var(--pf-muted);margin-left:-.4rem;}
.pfx-toggle-here{font-weight:400;color:var(--pf-muted);}
.pfx-drop{
  display:none;position:absolute;top:100%;left:0;z-index:400;min-width:250px;
  background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);
  box-shadow:var(--pf-shadow);padding:.45rem;
}
.pfx-item.is-open > .pfx-drop{display:block;}
html:not(.pf-js) .pfx-item:hover > .pfx-drop,
html:not(.pf-js) .pfx-item:focus-within > .pfx-drop{display:block;}
.pfx-drop ul{list-style:none;margin:0;padding:0;}
.pfx-drop li{margin:0;}
.pf2026 .pfx-drop a:link,.pf2026 .pfx-drop a:visited{
  display:block;padding:.5rem .75rem;border-radius:6px;color:var(--pf-ink);text-decoration:none;font-size:.95rem;line-height:1.35;
}
.pf2026 .pfx-drop a:hover{background:var(--pf-paper);color:var(--pf-blue);}
.pf2026 .pfx-drop a[aria-current="page"]{background:var(--pf-tint);color:var(--pf-blue);font-weight:600;}
.pfx-more{margin-left:auto;}
.pfx-more[hidden]{display:none;}
.pfx-more .pfx-drop{left:auto;right:0;}

/* the page list the CMS writes (.pfx-src) is read by the script, which
   builds the header from it; it is only shown when there is no script */
.pfx-src{display:none;}
.pf-js .pfx:not(.is-built){display:none;}
html:not(.pf-js) .pfx:not(:has(.pfx-l2)){display:none;}
html:not(.pf-js) .pfx-src{
  display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;list-style:none;
  max-width:var(--pf-wrap);margin:0 auto;padding:1rem var(--pf-gutter);box-sizing:border-box;
}
html:not(.pf-js) .pfx-src li{margin:0;}
html:not(.pf-js) .pfx-l1{display:none;}
html:not(.pf-js) .pfx-l1:has(b){display:block;flex:0 0 100%;font:800 1.45rem/1.2 var(--pf-display);}
.pf2026 .pfx-src a:link,.pf2026 .pfx-src a:visited{color:var(--pf-ink);text-decoration:none;}

/* =====================================================================
   CONTAINER + CONTENT (existing class names, new look)
===================================================================== */
.pf2026 #container{position:relative;min-width:0;max-width:none;margin:0;padding:0;background:#fff;}
/* the blueprint grid at the top of every page except home: grid lines on
   the right-hand side only, fading out towards the left (so the text stays
   on plain white) and down the page. Below a product section header it
   carries straight on from the header's own grid: the script measures the
   header and sets --pf-grid-y so the rows line up. Elsewhere it fades in
   under the breadcrumb so there is no hard edge. */
.pf2026 #container::before{
  content:"";position:absolute;left:0;right:0;top:0;height:520px;pointer-events:none;
  background-image:var(--pf-grid);background-size:28px 28px;background-position:0 var(--pf-grid-y,0);
  -webkit-mask-image:linear-gradient(to right,transparent 25%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.45)),
                     linear-gradient(to bottom,transparent 0,#000 70px,#000 30%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 25%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.45)),
             linear-gradient(to bottom,transparent 0,#000 70px,#000 30%,transparent 100%);
  mask-composite:intersect;
}
/* straight on from the section header: same strength as its grid at the join
   (its overlay leaves 0 / 18% / 45% of the grid at 25% / 60% / 100% across) */
.pfx.is-built + #container::before{
  -webkit-mask-image:linear-gradient(to right,transparent 25%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.45)),
                     linear-gradient(to bottom,#000 0,#000 30%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 25%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.45)),
             linear-gradient(to bottom,#000 0,#000 30%,transparent 100%);
}
.pf2026 #container > #content{position:relative;}
body.pf2026:has(#content .pfc-hero:not(.pfc-hero-plain)) #container::before{display:none;} /* the home page has its own hero (the plain one keeps the page grid) */
.pf2026 #content{
  float:none;display:block;width:auto;min-height:0;
  max-width:var(--pf-read);margin:0 auto;padding:2.5rem var(--pf-gutter) 4rem;
  box-sizing:content-box;background:none;font-size:1.0625rem;
}
body.pf2026:has(#content .pfc-hero) #content{max-width:calc(var(--pf-wrap) - 2 * var(--pf-gutter));padding-top:0;padding-bottom:0;}
.pf2026 #content::after{content:"";display:table;clear:both;}

/* headings */
.pf2026 #content h1,.pf2026 #content .h1title,.pf2026 #content .title{
  font-family:var(--pf-display);font-weight:700;
  font-size:2.1rem;line-height:1.12;letter-spacing:-.012em;
  color:var(--pf-h1);margin:0 0 1.1rem;padding:0;background:none;
}
/* a title starting with a product name (split by the JS): the name becomes a
   small line above, like the home page eyebrow; the separator stays in the
   text for search engines and screen readers but is not shown */
.pf2026 #content h1 .pf-h1-kicker{
  display:block;margin:0 0 .55rem;font:500 .78rem/1.4 var(--pf-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--pf-blue);
}
.pf2026 #content h1 .pf-h1-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.pf2026 #content h1 .pf-h1-main{display:block;}
.pf2026 #content h1.pf-h1-split{position:relative;}
.pf2026 #content h2{
  font-family:var(--pf-display);font-weight:700;
  font-size:1.65rem;line-height:1.18;letter-spacing:-.01em;
  color:var(--pf-h2);margin:3.25rem 0 .9rem;padding:0;background:none;
}
/* main section headings: the logo's round symbol hangs in the left margin,
   so the heading text stays lined up with the body text (inline on narrow screens) */
.pf2026 #content > h2,.pf2026 #content > a > h2{position:relative;}
/* a heading wrapped in a link (old pages do this) looks like any other heading */
.pf2026 #content > a:link:has(> h2),.pf2026 #content > a:visited:has(> h2){text-decoration:none;color:inherit;}
.pf2026 #content > a:hover > h2{color:var(--pf-blue);}
.pf2026 #content > h2::before,.pf2026 #content > a > h2::before{
  content:"";position:absolute;left:-36px;top:.2em;width:22px;height:22px;
  background:var(--pf-logo-circle) center / 100% 100% no-repeat;
}
.pf2026 #content h3{
  font-family:var(--pf-display);font-weight:700;
  font-size:1.2rem;line-height:1.3;color:var(--pf-h1);margin:2rem 0 .75rem;padding:0;
}
.pf2026 #content h4{font-family:var(--pf-display);font-weight:600;font-size:1.05rem;color:var(--pf-ink);margin:1.5rem 0 .4rem;}
.pf2026 #content h1 strong,.pf2026 #content h2 strong{color:inherit;}
.pf2026 #content h2 a,.pf2026 #content h2 a:link,.pf2026 #content h2 a:visited,
.pf2026 #content h3 a:link,.pf2026 #content h3 a:visited{display:inline;margin:0;color:inherit;text-decoration:none;background:none;}
.pf2026 #content h2 a:hover{color:var(--pf-blue-d);}
.pf2026 #content h3 a:hover{color:var(--pf-blue);}

/* text */
.pf2026 #content p{margin:0 0 1.1em;padding-left:0;}
.pf2026 #content div{margin:0 0 1em;padding-left:0;}
.pf2026 #content p.intro{font-size:1.18rem;line-height:1.6;color:var(--pf-muted);background:none;padding:0;margin:0 0 1.4rem;}
.pf2026 #content p.intro a:link,.pf2026 #content p.intro a:visited{color:var(--pf-blue);}
.pf2026 #content p.indent1{margin:0 0 1.1em 1.5rem;padding-left:0;}
.pf2026 #content b,.pf2026 #content strong{font-weight:600;color:var(--pf-ink);}
.pf2026 #content a:link,.pf2026 #content a:visited{
  color:var(--pf-blue);text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:rgba(15,95,166,.35);text-underline-offset:3px;
}
.pf2026 #content a:hover{color:var(--pf-blue-d);text-decoration-color:currentColor;}
.pf2026 #content a.black:link,.pf2026 #content a.black:visited{color:var(--pf-ink);font-weight:600;}
.pf2026 #content a.imglink:link,.pf2026 #content a.imglink:visited,
.pf2026 #content a.stdimg:link,.pf2026 #content a.stdimg:visited{text-decoration:none;}

.pf2026 #content ul{margin:0 0 1.25em;padding-left:1.35em;list-style-type:square;color:var(--pf-body);}
.pf2026 #content ol{margin:0 0 1.25em;padding-left:1.6em;}
.pf2026 #content li{margin:0 0 .35em;}
.pf2026 #content ul > li::marker{color:var(--pf-blue);}
.pf2026 #content ol > li::marker{color:var(--pf-blue);font-family:var(--pf-mono);font-size:.9em;}

.pf2026 #content .small80{font-size:.88rem;color:var(--pf-muted);}
.pf2026 #content .small90{font-size:.93rem;}
.pf2026 #content .small100,.pf2026 #content .normal100,.pf2026 #content .normal120,.pf2026 #content .normal150{font-size:1rem;}
.pf2026 #content .strong1{font-size:1.15rem;color:var(--pf-blue);}
.pf2026 #content .strong2,.pf2026 #content .strong3{color:var(--pf-blue);}
.pf2026 #strong1,.pf2026 #strong2,.pf2026 #strong3,.pf2026 #strong4{color:var(--pf-blue);}

.pf2026 #content #indent1{
  display:block;margin:0 0 1.25em;padding:1rem 1.2rem;
  background:var(--pf-tint);border-left:3px solid var(--pf-blue);border-radius:0 var(--pf-r) var(--pf-r) 0;color:var(--pf-ink);
}
.pf2026 #content #indent0{margin:1rem 0 1.25rem;padding:0;}
.pf2026 #content code{font-family:var(--pf-mono);font-size:.88em;background:var(--pf-paper);border:1px solid var(--pf-line);border-radius:3px;padding:.05em .35em;}

/* the flowline: every hr and section divider */
.pf2026 #content p.sectiondivider,.pf2026 #content hr{
  display:block;clear:both;position:relative;overflow:visible;height:1px;margin:2.75rem 0;padding:0;
  background:var(--pf-line);border:0;
}
.pf2026 #content p.sectiondivider::after,.pf2026 #content hr::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--pf-blue);
}

/* "Next:" link at the foot of a page */
.pf2026 #content a.nextpage:link,.pf2026 #content a.nextpage:visited{
  float:none;clear:both;position:relative;display:block;margin:3rem 0 0;padding:1.1rem 3rem 1.1rem 1.25rem;
  border:1px solid var(--pf-line);border-top:3px solid var(--pf-blue);border-radius:var(--pf-r);background:#fff;
  font:600 1rem/1.35 var(--pf-display);color:var(--pf-ink);text-decoration:none;
}
.pf2026 #content a.nextpage::after{
  content:"";position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);
  border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--pf-blue);
}
.pf2026 #content a.nextpage:hover{color:var(--pf-blue);border-top-color:var(--pf-flame);}

/* images */
.pf2026 #content img{max-width:100%;height:auto;}
/* img.expando (screenshot pages): the old expando.js grows the picture on hover by
   setting its width and height; keep the height in proportion when the width is
   held to the column (phones) */
.pf2026 #content img.expando{height:auto!important;}
@media (max-width:640px){.pf2026 #content img.expando{margin-left:0;margin-right:0;}}
.pf2026 #content img.stdimgright,.pf2026 #content img.stdimgrightnoborder,
.pf2026 #content img.stdimgright2,.pf2026 #content img.stdimgright2noborder,
.pf2026 #content div.stdimgright2noborder{float:right;max-width:46%;margin:.3rem 0 1.25rem 1.75rem;padding:0;}
.pf2026 #content img.stdimgleft,.pf2026 #content img.stdimgleftnoborder,
.pf2026 #content img.stdimgleft2noborder,.pf2026 #content img.stdimgleftindentnoborder{float:left;max-width:46%;margin:.3rem 1.75rem 1.25rem 0;padding:0;}
.pf2026 #content img.stdimgleftindentnoborder{margin-right:2.5rem;}
.pf2026 #content img.stdimgright80noborder{float:right;margin:.3rem 0 1rem 1.25rem;}
/* wide product banner pictures (from /public/images/headers/, about 700px
   wide) are too small floated at half width: show them centred at their
   full size, below the page title and above the text */
.pf2026 #content img.stdimgright2noborder[src*="/images/headers/"]{
  float:none;display:block;width:auto;max-width:100%;height:auto;margin:.25rem auto 1.75rem;
}
/* the line breaks old pages put after the banner (to clear it while it
   floated) are not needed now it sits on its own line */
.pf2026 #content img.stdimgright2noborder[src*="/images/headers/"] + br,
.pf2026 #content img.stdimgright2noborder[src*="/images/headers/"] + br + br,
.pf2026 #content img.stdimgright2noborder[src*="/images/headers/"] + br + br + br,
.pf2026 #content img.stdimgright2noborder[src*="/images/headers/"] + br + br + br + br,
.pf2026 #content a:has(> img.stdimgright2noborder[src*="/images/headers/"]) + br,
.pf2026 #content a:has(> img.stdimgright2noborder[src*="/images/headers/"]) + br + br,
.pf2026 #content a:has(> img.stdimgright2noborder[src*="/images/headers/"]) + br + br + br,
.pf2026 #content a:has(> img.stdimgright2noborder[src*="/images/headers/"]) + br + br + br + br{display:none;}
.pf2026 #content img.stdimgleft80noborder{float:left;margin:.3rem 1.25rem 1rem 0;}
.pf2026 #content img.stdimgcenter,.pf2026 #content img.stdimgcenternoborder{display:block;margin:1.5rem auto;}
.pf2026 #content img.stdimgright,.pf2026 #content img.stdimgright2,.pf2026 #content img.stdimgleft,
.pf2026 #content img.stdimgcenter,.pf2026 #content img.screenshotcenterborder{
  border:1px solid var(--pf-line);border-radius:var(--pf-r);background:#fff;box-shadow:var(--pf-shadow);
}

/* buttons written as <a><input class="btn1..."></a> */
.pf2026 .btn1,.pf2026 .btn1right,.pf2026 .btn1rightwithmargin,.pf2026 .btn1center,.pf2026 .btn1center2{
  -webkit-appearance:none;appearance:none;
  background:var(--pf-cta) var(--pf-cta-fill);color:var(--pf-cta-ink);border:1.5px solid var(--pf-cta-edge);border-radius:6px;
  font:var(--pf-cta-font);letter-spacing:.02em;text-shadow:none;
  padding:.7rem 1.1rem;min-height:42px;cursor:pointer;box-shadow:none;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s;
}
.pf2026 .btn1:hover,.pf2026 .btn1right:hover,.pf2026 .btn1rightwithmargin:hover,.pf2026 .btn1center:hover,.pf2026 .btn1center2:hover{
  background:var(--pf-btn-h);border-color:var(--pf-btn-h-edge);color:var(--pf-btn-h-ink);transform:translateY(-1px);box-shadow:var(--pf-btn-lift);
}
.pf2026 .btn1:active,.pf2026 .btn1right:active,.pf2026 .btn1center:active{transform:none;box-shadow:none;}
.pf2026 :is(.btn1,.btn1right,.btn1rightwithmargin,.btn1center,.btn1center2):focus-visible{outline:3px solid rgba(21,112,239,.35);outline-offset:2px;}
.pf2026 .btn1center{float:none;left:auto;display:block;margin:1rem auto;}
.pf2026 #content p > a > input.btn1{float:none;vertical-align:middle;margin:.15rem .6rem .75rem 0;}
/* right-floated old buttons sit beside the others with the same small gap */
.pf2026 #content p > a > input.btn1right{margin:.15rem 0 .75rem .6rem;}
.pf2026 #content a:link:has(> input[type=button]),.pf2026 #content a:visited:has(> input[type=button]){text-decoration:none;}
/* a run of right-floated buttons (grouped by the script): no box of its own
   on wide screens; stacked in the order they show there on phones */
.pf2026 #content .pf-btnrun{display:contents;}

/* testimonials */
.pf2026 #content blockquote{
  clear:both;margin:2.6rem 0;padding:1.3rem 1.5rem;
  background:#fff;border:1px solid var(--pf-line);border-left:3px solid var(--pf-blue);border-radius:0 var(--pf-r) var(--pf-r) 0;
  box-shadow:0 1px 2px rgba(14,27,42,.05),0 6px 18px rgba(14,27,42,.06);
}
.pf2026 #content blockquote p{margin:0 0 .7rem;}
.pf2026 #content blockquote p.sourcetext,.pf2026 #content blockquote p.sourcetextnoimage{
  background:none;padding:0 0 0 1.9rem;margin:0 0 .8rem;
  font-size:1.05rem;font-style:italic;line-height:1.6;color:var(--pf-ink);
}
.pf2026 #content blockquote p.sourcetext,.pf2026 #content blockquote p.sourcetextnoimage{position:relative;}
/* one opening quote mark, on p.sourcetext only (sourcetextnoimage = the following paragraphs of a long email,
   which had no quote image in the old CSS either); out of flow, so the spaces in the old markup do not show */
.pf2026 #content blockquote p.sourcetext::before{
  content:"\201C";position:absolute;left:0;top:-.08em;font:800 2.4em/1 var(--pf-display);font-style:normal;color:var(--pf-blue);opacity:.55;
}
/* key phrases the content already puts in bold */
.pf2026 #content blockquote p.sourcetext b,.pf2026 #content blockquote p.sourcetextnoimage b{font-weight:600;color:var(--pf-ink);}
.pf2026 #content blockquote p.author{padding:0 0 0 1.9rem;margin:0;font:400 .8rem/1.5 var(--pf-mono);color:var(--pf-muted);}
.pf2026 #content blockquote img.stdimgright2noborder{max-width:90px;margin:0 0 .5rem 1rem;}

/* boxes */
.pf2026 #content .feature,.pf2026 #content div .feature{
  width:auto;max-width:none;clear:both;margin:2rem 0;padding:1.5rem 1.6rem;
  background:#fff;border:1px solid var(--pf-line);border-top:3px solid var(--pf-blue);border-radius:var(--pf-r);
}
.pf2026 #content .feature > :last-child{margin-bottom:0;}
.pf2026 #content .feature h2{font-size:1.5rem;}
.pf2026 #content .featureleftsmall,.pf2026 #content .featurerightsmall,
.pf2026 #content div .featureleftsmall,.pf2026 #content div .featurerightsmall{
  display:block;box-sizing:border-box;width:calc(50% - .75rem);left:auto;
  margin:0 0 1.5rem;padding:1.25rem;background:#fff;border:1px solid var(--pf-line);border-top:3px solid var(--pf-blue);border-radius:var(--pf-r);
}
.pf2026 #content .featureleftsmall{float:left;clear:left;}
.pf2026 #content .featurerightsmall{float:right;clear:right;}
.pf2026 #content .featureleftsmall::after,.pf2026 #content .featurerightsmall::after{content:"";display:table;clear:both;}
.pf2026 #content .featureleftsmall > :last-child,.pf2026 #content .featurerightsmall > :last-child{margin-bottom:0;}
.pf2026 #content .feature h2,.pf2026 #content .feature h3,
.pf2026 #content .featureleftsmall h2,.pf2026 #content .featureleftsmall h3,
.pf2026 #content .featurerightsmall h2,.pf2026 #content .featurerightsmall h3{clear:none;margin-top:0;}
.pf2026 #content .divblock,.pf2026 #content .divsection{clear:both;}
/* old two-column helpers: floats sized to their text (up to full width),
   without the old arrow picture */
.pf2026 #content .alignleft,.pf2026 #content .alignright{width:auto;max-width:100%;background:none;padding-left:0;margin:0 0 1em;}
.pf2026 #content .alignleft{float:left;margin-right:2rem;}
.pf2026 #content .alignright{float:right;margin-left:2rem;}

/* FAQ pages: the question gets a "Q" tag like the readout tags */
.pf2026 #content .questionbox{
  position:relative;margin:2rem 0 0;padding:1rem 1.25rem 1rem 3.6rem;
  background:var(--pf-paper);border:1px solid var(--pf-line);border-bottom:0;border-radius:var(--pf-r) var(--pf-r) 0 0;color:var(--pf-ink);
}
.pf2026 #content .questionbox::before{
  content:"Q";position:absolute;left:1.1rem;top:1rem;width:1.6rem;line-height:1.6rem;text-align:center;
  font:500 .75rem/1.6rem var(--pf-mono);color:var(--pf-blue);background:var(--pf-tint);border:1px solid rgba(15,95,166,.25);border-radius:3px;
}
.pf2026 #content .question{margin:0;padding:0;font:600 1.05rem/1.45 var(--pf-display);font-style:normal;color:var(--pf-ink);}
/* answer boxes keep the old paper clip at the top right */
.pf2026 #content .answerbox{margin:0 0 2rem;padding:1.25rem 4.25rem .5rem 1.25rem;background:#fff url(https://www.pipeflow.com/public/images/general/paper_clip_1_48.png) no-repeat right .75rem top .5rem;background-size:40px auto;border:1px solid var(--pf-line);border-radius:0 0 var(--pf-r) var(--pf-r);}
.pf2026 #content .answer{margin:0 0 1rem;padding:0;}
.pf2026 #content div.answerbox ul,.pf2026 #content div.answerbox ol{padding:0 0 0 1.4em;margin:0 0 1rem;}
.pf2026 #content div.answerbox ul{list-style-type:square;}
.pf2026 #content div.answerbox li{margin:0 0 .6rem;padding:0;}

.pf2026 #content .newsbox{
  display:flow-root;margin:1.5rem 0;padding:1rem 1.25rem;
  background:#fff;border:1px solid var(--pf-line);border-left:3px solid var(--pf-blue);border-radius:0 var(--pf-r) var(--pf-r) 0;
}
.pf2026 #content .news{margin:0;padding:0;}
.pf2026 #content .newsbox > :last-child{margin-bottom:0;}

/* price list rows (licence / renewal pages): the old fixed-height box with
   absolutely positioned spans becomes a row: name + details | price | buy */
.pf2026 #content .productarea{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name gbp buy" "name usd buy";
  align-items:center;gap:.1rem 1.25rem;height:auto!important;margin:1rem 0;padding:1rem 1.25rem;
  background:#fff;border:1px solid var(--pf-line);border-left:3px solid var(--pf-prod,var(--pf-blue));border-radius:0 var(--pf-r) var(--pf-r) 0;
  font-size:.95rem;line-height:1.5;
}
.pf2026 #content .productarea > span{position:static!important;left:auto!important;top:auto!important;width:auto!important;margin:0!important;padding:0!important;float:none!important;}
.pf2026 #content .productarea .productname{grid-area:name;font-weight:600;color:var(--pf-ink);}
.pf2026 #content .productarea .productname .normal100{display:block;font-weight:400;color:var(--pf-muted);font-size:.92rem;}
.pf2026 #content .productarea .productname br{display:none;}
.pf2026 #content .productarea .productpriceGBP{grid-area:gbp;justify-self:end;font:600 1.25rem/1.2 var(--pf-mono);color:var(--pf-ink);white-space:nowrap;}
.pf2026 #content .productarea .productpriceUSD{grid-area:usd;justify-self:end;font:400 .85rem/1.2 var(--pf-mono);color:var(--pf-muted);white-space:nowrap;}
.pf2026 #content .productarea .productbuynow{grid-area:buy;line-height:0;}
.pf2026 #content .productarea .productbuynow img{display:block;max-width:none;}
.pf2026 #content .productareaheader{height:auto!important;margin:0;padding:0;}

.pf2026 #content table{font-size:inherit;border-collapse:separate;}
.pf2026 #content .tabledefault{border:1px solid var(--pf-line);border-radius:var(--pf-r);}

/* ---------------------------------------------------------------------
   More existing content classes (from the site-wide class check, 24 Oct
   2026). The old pipeflow.css still loads first and keeps doing their
   layout (floats, the iPhone / desktop video frames, the screenshot
   columns); these rules only give them the new look, or stop the new
   general rules from upsetting that layout.
     layout kept from the old CSS: screenshotcontainer screenshotleft
       screenshotright screenshotcenter screenshottextleft nomargintop
       rightalign leftalign iphone_xs_video_container
       desktop_video_container video-container3 divsectionmobile
       marginleft30 margintop20 floatinline90 iconimage reporticon
       stdimg2noborder stdimgnobordernomargin stdbutton stdbuttonleft
       stdbuttonright platform-logo
--------------------------------------------------------------------- */
/* FAQ question lists: one underline (the old CSS adds a dotted picture) */
.pf2026 #content div.question2{margin:0 0 .65rem;line-height:1.5;}
.pf2026 #content div.question2 a:link,.pf2026 #content div.question2 a:visited{background:none;padding-bottom:0;}
.pf2026 #content div.question2 a:hover{background:none;}
.pf2026 #content div.question2 img[align]{margin:.25rem .35rem 0 0;opacity:.75;}

/* captions under screenshots and videos: readable grey */
.pf2026 #content .screenshotcaption,.pf2026 #content .videocaption{
  color:var(--pf-muted);font-size:.88rem;line-height:1.4;margin-top:.35rem;
}
.pf2026 #content .screenshotcontainer{margin-bottom:1.5rem;}
.pf2026 #content .screenshotcontainer::after{content:"";display:table;clear:both;}
/* screenshots and videos inside these frames are pictures of the app: no new frame */
.pf2026 #content .screenshotleft img,.pf2026 #content .screenshotright img,.pf2026 #content .screenshotcenter img{border:0;box-shadow:none;}
.pf2026 #content .iphone_xs_video_container video,.pf2026 #content .desktop_video_container video{max-width:none;}

/* platform rows (Windows / macOS / iOS): the separator is the flowline */
.pf2026 #content hr.platform-separator{margin:3.5rem 0 0;}
.pf2026 #content img.platform-logo{margin-top:2.25rem;}

/* embedded video boxes */
.pf2026 #content .video-container{border-radius:10px;background:var(--pf-ink);box-shadow:var(--pf-shadow);margin:1.5rem 0;}
.pf2026 #content .video-container3 video,.pf2026 #content .video-container3 iframe{border-radius:10px;}

/* larger text */
.pf2026 #content .normal200{font:700 1.6rem/1.25 var(--pf-display);color:var(--pf-ink);}

/* App Store badge inside a price row takes the place of the price + button */
.pf2026 #content .productarea .productdownloadontheappstore{grid-column:2 / 4;grid-row:1 / 3;justify-self:end;line-height:0;}
.pf2026 #content .productarea .productdownloadontheappstore img{display:block;max-width:none;height:40px;width:auto;}

/* table of contents lists (Example Systems page) */
.pf2026 #content .Toc1,.pf2026 #content .Toc2{margin:0 0 .5rem;}

/* forms */
.pf2026 #content input[type=text],.pf2026 #content input[type=email],.pf2026 #content input[type=number],
.pf2026 #content input[type=tel],.pf2026 #content input[type=password],.pf2026 #content select,.pf2026 #content textarea{
  font:inherit;font-size:1rem;color:var(--pf-ink);padding:.65rem .8rem;
  border:1px solid #AFBCCB;border-radius:6px;background:#fff;max-width:100%;box-sizing:border-box;
}
.pf2026 #content input[type=text]:focus,.pf2026 #content input[type=email]:focus,
.pf2026 #content select:focus,.pf2026 #content textarea:focus{outline:3px solid rgba(15,95,166,.3);border-color:var(--pf-blue);}
.pf2026 #content input[type=email].normal100{width:22rem;}
.pf2026 #content input.normal100{max-width:100%;} /* other inputs keep the width of their size attribute */
.pf2026 #content form{padding:0;background:transparent;}

/* videos: <a class="YTvid"><img thumb><img play-button></a>
   the old play-button picture is replaced by an orange play disc */
.pf2026 #content a.YTvid:has(> img){
  display:block;position:relative;overflow:hidden;line-height:0;border-radius:10px;
  background:var(--pf-ink);text-decoration:none;border:1px solid var(--pf-line);box-shadow:var(--pf-shadow);
}
.pf2026 #content a.YTvid > img:first-child{width:100%;transition:transform .3s,opacity .2s;}
.pf2026 #content a.YTvid:hover > img:first-child{transform:scale(1.03);opacity:.92;}
.pf2026 #content a.YTvid img[src*="play_video"]{display:none;}
.pf2026 #content a.YTvid:has(> img)::after{
  content:"";position:absolute;left:50%;top:50%;width:clamp(44px,13%,78px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='40' fill='%23E07B1A'/%3E%3Cpath d='M32 25l24 15-24 15z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.pf2026 #content a.YTvid:hover::after{transform:translate(-50%,-50%) scale(1.08);}
/* video list rows (e.g. Quick Start Videos): <div style="position: relative">
   <a><img thumb float:left hspace><div grey strip absolute><img play absolute></a>
   <a>title</a><br><br>text</div>. The strip and play button are centred on the
   thumbnail; from 641px the title and text sit in a column beside it, on
   phones thumbnail, title and text stack */
.pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child{
  float:left;position:relative;display:block;margin:.2rem 1.25rem .5rem 0;line-height:0;
}
.pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child > img:first-child{float:none!important;margin:0;}
.pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child > div[style*="absolute"]{
  left:1px!important;right:1px;width:auto!important;top:50%!important;transform:translateY(-50%);
}
.pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child > img[src*="play_video"]{
  top:50%!important;left:50%!important;transform:translate(-50%,-50%);
}
@media (max-width:640px){
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]){display:flex;flex-direction:column;align-items:flex-start;}
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child{float:none;margin:0 0 .75rem;width:100%;max-width:320px;}
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child > img:first-child{width:100%;height:auto;}
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child + a{margin-bottom:.5rem;}
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > br{display:none;}
}
@media (min-width:641px){
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]){
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:1.5rem;align-items:start;
  }
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child{grid-column:1;grid-row:1 / 3;margin:.2rem 0 0;}
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > a:first-child + a{grid-column:2;margin-bottom:.6rem;}
  .pf2026 #content div[style*="position: relative"]:has(> a > img[src*="img.youtube.com/vi/"] + div[style*="absolute"]) > br{display:none;}
}
.pf2026 #content div[style*="Gainsboro"]{border:0!important;float:none!important;max-width:100%;margin-left:0;margin-right:auto;}
.pf2026 #content div[style*="width:320px"]{float:left!important;width:calc(50% - .75rem)!important;margin:0 1.5rem 1.5rem 0;}
.pf2026 #content div[style*="width:320px"] + div[style*="width:320px"]{margin-right:0;}
.pf2026 #content div[style*="width:320px"] img{width:100%;}
.pf2026 #content div[style*="Gainsboro"] > span[style*="absolute"]{
  position:static!important;display:block!important;width:auto!important;background:none!important;
  color:var(--pf-ink)!important;padding:.6rem 0 0!important;font-weight:600;font-size:.93rem;line-height:1.35;
}
.pf2026 #content [style*="width"]{max-width:100%;}

/* =====================================================================
   NEW CONTENT COMPONENTS (pfc-) - home page
===================================================================== */
/* buttons inside the content keep their own colours */
.pf2026 #content a.pf-btn:link,.pf2026 #content a.pf-btn:visited{text-decoration:none;}
.pf2026 #content a.pf-btn:not(.pf-btn-cta):not(.pf-btn-light):not(.pf-btn-ghost):link,
.pf2026 #content a.pf-btn:not(.pf-btn-cta):not(.pf-btn-light):not(.pf-btn-ghost):visited{color:var(--pf-ink);}
.pf2026 #content a.pf-btn:not(.pf-btn-cta):not(.pf-btn-light):not(.pf-btn-ghost):hover{color:var(--pf-btn-h-ink);}
.pf2026 #content a.pf-btn-cta:link,.pf2026 #content a.pf-btn-cta:visited{color:var(--pf-cta-ink);}
.pf2026 #content a.pf-btn-cta:hover{color:var(--pf-btn-h-ink);}
/* grey home closing band: the white hover shows well there too */
.pf2026 #content .pfc-final a.pf-btn-cta:hover{border-color:#fff;}
.pf2026 #content a.pf-btn-light:link,.pf2026 #content a.pf-btn-light:visited,.pf2026 #content a.pf-btn-light:hover{color:#fff;}
.pf2026 #content a.pf-btn-ghost:hover{text-decoration:underline;}

/* full-width background band; its content stays aligned with the page */
.pf2026 #content .pfc-band{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
}
.pf2026 #content .pfc-section{margin:0;padding:2.75rem 0;}
.pf2026 #content .pfc-section > h2:first-child,.pf2026 #content .pfc-section > .pfc-eyebrow + h2{margin-top:0;}
body.pf2026:has(#content .pfc-hero) #content > hr{margin:0;}
.pf2026 #content .pfc-center{text-align:center;}
.pf2026 #content .pfc-eyebrow{
  margin:0 0 .9rem;font:500 .72rem/1.4 var(--pf-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--pf-blue);
}
.pf2026 #content .pfc-body{max-width:62ch;margin:0 0 1.4rem;}
.pf2026 #content .pfc-more{margin:1.25rem 0 0;font-size:.95rem;color:var(--pf-muted);}
.pf2026 #content .pfc-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.4rem 0 0;}
.pf2026 #content .pfc-center .pfc-actions{justify-content:center;}

/* hero on blueprint paper */
.pf2026 #content .pfc-hero{
  position:relative;overflow:hidden;margin-top:0;margin-bottom:0;padding-top:3.25rem;padding-bottom:2.75rem;
  background-color:var(--pf-paper);background-image:var(--pf-grid);background-size:28px 28px;
  border-bottom:1px solid var(--pf-line);
}
.pf2026 #content .pfc-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 70% 30%,transparent 0%,var(--pf-paper) 78%);
}
/* plain hero: white like the other pages, over the page's faded grid */
.pf2026 #content .pfc-hero.pfc-hero-plain{background:none;overflow:visible;}
.pf2026 #content .pfc-hero.pfc-hero-plain::before{display:none;}
/* its headline: a little smaller, one phrase per line (spans in the content) */
.pf2026 #content h1 .pfc-line{display:block;}
.pf2026 #content .pfc-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center;margin:0;}
.pf2026 #content .pfc-hero-grid > div{margin:0;}
.pf2026 #content .pfc-hero h1{font-size:2.75rem;font-weight:800;line-height:1.08;letter-spacing:-.015em;color:var(--pf-ink);} /* the home hero keeps its big headline */
.pf2026 #content .pfc-hero-plain h1{font-size:2.1rem;font-weight:600;}
.pf2026 #content .pfc-lede{font-size:1.18rem;line-height:1.6;color:var(--pf-muted);margin:0 0 .25rem;max-width:46ch;}
.pf2026 #content .pfc-reassure{font:400 .8rem/1.5 var(--pf-mono);color:var(--pf-muted);margin:1rem 0 0;}
.pf2026 #content .pfc-news{margin:1.4rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--pf-line);font-size:.93rem;}
/* wide hero (pfc-hero-wide): headline on one line across the page, news line across the page under the
   text and picture; on phones the headline goes back to one phrase per line */
.pf2026 #content .pfc-hero-wide > h1{margin:0 0 1.75rem;font-size:min(1.95rem,2.75vw);} /* one line from 1024px wide */
@media (max-width:1023px){.pf2026 #content .pfc-hero-wide > h1{font-size:1.9rem;}} /* tablets: wraps naturally */
.pf2026 #content .pfc-hero-wide > h1 .pfc-line{display:inline;}
.pf2026 #content .pfc-hero-wide > .pfc-news{margin-top:2.25rem;}
.pf2026 #content .pfc-shot{margin:0;}
.pf2026 #content .pfc-shot a{display:block;line-height:0;}
.pf2026 #content .pfc-shot img{
  display:block;width:100%;border-radius:var(--pf-r);border:1px solid var(--pf-line);box-shadow:var(--pf-shadow);background:#fff;
}

/* instrument readout strip */
.pf2026 #content .pfc-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0;padding:1.4rem 0;border-bottom:1px solid var(--pf-line);}
.pf2026 #content .pfc-readout p{margin:0;text-align:center;border-left:2px solid var(--pf-line);padding-left:1rem;}
.pf2026 #content .pfc-readout p:first-child{border-left:0;}
.pf2026 #content .pfc-readout b{display:block;font:500 1.7rem/1.1 var(--pf-mono);color:var(--pf-ink);}
.pf2026 #content .pfc-readout span{display:block;margin-top:.25rem;font-size:.82rem;color:var(--pf-muted);}

/* videos */
.pf2026 #content .pfc-video{max-width:760px;margin:1.4rem auto 0;}
.pf2026 #content .pfc-narrow .pfc-video{max-width:620px;}
.pf2026 #content .pfc-caption{font:400 .82rem/1.5 var(--pf-mono);color:var(--pf-muted);margin:.9rem 0 0;}

/* capability list with readout tags */
.pf2026 #content .pfc-specs{list-style:none;padding:0;margin:1.2rem 0 0;max-width:62ch;}
.pf2026 #content .pfc-specs li{display:flex;align-items:center;gap:.9rem;margin:0;padding:.55rem 0;border-bottom:1px solid var(--pf-line);}
.pf2026 #content .pfc-specs li::marker{content:none;}
.pf2026 #content .pfc-specs span{
  flex:0 0 auto;min-width:48px;padding:.3rem .45rem;box-sizing:border-box;text-align:center;
  font:500 .66rem/1.2 var(--pf-mono);letter-spacing:.1em;color:var(--pf-blue);
  background:var(--pf-tint);border:1px solid rgba(15,95,166,.2);border-radius:3px;
}
/* spec list with fixed-width tags, each with a small line icon in front */
.pf2026 #content .pfc-specs-icons{max-width:none;}
.pf2026 #content .pfc-specs-icons span{
  display:inline-flex;align-items:center;gap:.5rem;flex:0 0 10.25rem;width:10.25rem;text-align:left;padding:.35rem .55rem;
}
.pf2026 #content .pfc-specs-icons span::before{
  content:"";flex:0 0 auto;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--ic) center / contain no-repeat;mask:var(--ic) center / contain no-repeat;
}
.pf2026 #content .pfc-specs-icons .ic-flow{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 18h18M6 12h11M14 9l3 3-3 3'/%3E%3C/svg%3E");}
.pf2026 #content .pfc-specs-icons .ic-drop{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 17a8 8 0 1 1 15 0'/%3E%3Cpath d='M12 15l4-5'/%3E%3C/svg%3E");}
.pf2026 #content .pfc-specs-icons .ic-pump{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l4 4-4 4'/%3E%3C/svg%3E");}
.pf2026 #content .pfc-specs-icons .ic-loop{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h12v12H6z'/%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3C/svg%3E");}
.pf2026 #content .pfc-specs-icons .ic-fit{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21v-7a7 7 0 0 1 7-7h7'/%3E%3Cpath d='M20 3.5v7M2.5 21h7'/%3E%3C/svg%3E");}
.pf2026 #content .pfc-specs-icons .ic-liquid{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/%3E%3C/svg%3E");}
.pf2026 #content .pfc-specs-icons .ic-gas{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c2-2 4-2 6 0s4 2 6 0 4-2 6 0M3 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E");}

/* cards */
.pf2026 #content .pfc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin:.5rem 0 0;}
.pf2026 #content .pfc-card{margin:0;padding:1.4rem;background:#fff;border:1px solid var(--pf-line);border-top:3px solid var(--pf-prod,var(--pf-blue));border-radius:var(--pf-r);}
.pf2026 #content .pfc-card h3{clear:none;margin:0 0 .5rem;font-size:1.18rem;}
.pf2026 #content .pfc-card p{margin:0;color:var(--pf-muted);font-size:.97rem;}
.pf2026 #content .pfc-card img{float:right;width:48px;margin:0 0 .5rem 1rem;filter:drop-shadow(0 6px 8px rgba(14,27,42,.2));}
.pf2026 #content .pfc-card-link{position:relative;transition:border-color .15s;}
.pf2026 #content .pfc-card-link h3 a:link,.pf2026 #content .pfc-card-link h3 a:visited{color:var(--pf-ink);}
.pf2026 #content .pfc-card-link h3 a::after{content:"";position:absolute;inset:0;} /* whole card is the link */
.pf2026 #content .pfc-card-link:hover{border-top-color:var(--pf-flame);}
.pf2026 #content .pfc-card-link:hover h3 a{color:var(--pf-blue);}

/* customers + testimonials */
.pf2026 #content .pfc-users{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin:0 0 1.6rem;padding:0;}
.pf2026 #content .pfc-users li{margin:0;font:600 1.02rem/1.4 var(--pf-display);color:var(--pf-muted);}
.pf2026 #content .pfc-users li::marker{content:none;}
/* scrolling single line of names: the list holds the names twice and moves left by half its width, so it loops (steady scroll without the JS; with it, stepNames() moves and pauses) */
.pf2026 #content .pfc-marquee{overflow:hidden;margin:1.4rem 0 3rem;padding:.35rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.pf2026 #content .pfc-users-scroll{flex-wrap:nowrap;width:max-content;gap:0;margin:0;animation:pfc-marquee 110s linear infinite;}
.pf2026 #content .pfc-users-scroll li{padding:0 1.4rem;white-space:nowrap;}
.pf2026 #content .pfc-marquee:hover .pfc-users-scroll{animation-play-state:paused;}
.pf2026 #content .pfc-marquee.is-stepped .pfc-users-scroll{animation:none;} /* the JS moves it in steps instead */
@keyframes pfc-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .pf2026 #content .pfc-marquee{overflow-x:auto;}
  .pf2026 #content .pfc-users-scroll{animation:none;}
}
.pf2026 #content .pfc-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin:0 0 1.6rem;}
.pf2026 #content .pfc-quotes blockquote{margin:0;display:flex;flex-direction:column;}
.pf2026 #content .pfc-quotes blockquote p.author{margin-top:auto;}

/* link lists */
.pf2026 #content .pfc-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2.5rem;margin:0;}
.pf2026 #content .pfc-links{list-style:none;padding:0;margin:0;}
.pf2026 #content .pfc-links li{margin:0;padding:.55rem 0;border-top:1px solid var(--pf-line);}
.pf2026 #content .pfc-links li::marker{content:none;}
.pf2026 #content .pfc-links a:link,.pf2026 #content .pfc-links a:visited{text-decoration:none;font-weight:500;}
.pf2026 #content .pfc-links a:hover{text-decoration:underline;}

/* closing trial band */
.pf2026 #content .pfc-final{
  position:relative;overflow:hidden;margin-top:0;margin-bottom:0;padding-top:3.25rem;padding-bottom:3.25rem;
  background:var(--pf-foot);color:#fff;text-align:center;
}
.pf2026 #content .pfc-final::before{
  content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:28px 28px;
}
.pf2026 #content .pfc-final > *{position:relative;}
.pf2026 #content .pfc-final h2{margin:0 0 .75rem;font-size:2rem;font-weight:800;color:#fff;}
.pf2026 #content .pfc-final p{max-width:60ch;margin:0 auto;}
.pf2026 #content .pfc-final .pfc-actions{justify-content:center;}
.pf2026 #content .pfc-final .pfc-contact{margin-top:1.3rem;font:400 .85rem/1.5 var(--pf-mono);color:#fff;}
.pf2026 #content .pfc-final .pfc-contact a:link,.pf2026 #content .pfc-final .pfc-contact a:visited{color:#fff;text-decoration-color:rgba(255,255,255,.4);}

/* =====================================================================
   FOOTER
===================================================================== */
.pff{
  position:relative;clear:both;background:var(--pf-foot);color:#fff;font-size:.93rem;line-height:1.6;
  border-top:3px solid var(--pf-blue);
}
body.pf2026:not(:has(#content .pfc-hero)) .pff{margin-top:3rem;}
body.pf2026:has(#content .pfc-hero) .pff{border-top-color:rgba(255,255,255,.18);}
.pff-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:2rem;padding-top:3.25rem;padding-bottom:2.5rem;}
.pf2026 .pff h2{
  clear:none;background:none;padding:0;margin:0 0 .9rem;
  font:500 .72rem/1.3 var(--pf-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.pff ul{list-style:none;margin:0;padding:0;}
.pff li{margin:0 0 .45rem;padding:0;background:none;}
.pf2026 .pff a:link,.pf2026 .pff a:visited{color:#fff;text-decoration:none;}
.pf2026 .pff a:hover{color:#fff;text-decoration:underline;}
.pff-name{margin:0 0 .6rem;font:800 1.3rem/1.2 var(--pf-display);color:#fff;}
.pff p{margin:0 0 1rem;}
.pff address{font:normal 400 .85rem/1.6 var(--pf-mono);margin:0 0 1.25rem;}
/* bottom strip: very light grey, so the Sectigo seal and the Worldpay card logos (not made for dark backgrounds) look right */
.pff-strip{background:#EEF1F4;color:var(--pf-body);border-top:1px solid rgba(255,255,255,.22);}
.pff-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-top:1.1rem;padding-bottom:1.1rem;font-size:.85rem;}
.pff-base p{margin:0;max-width:64ch;}
.pff-trust{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.pff-seal,.pff-pay{display:block;line-height:0;}
.pff-seal img{width:140px;height:54px;} /* drawn by TrustLogo (Sectigo); hovering shows the certificate details */
.pff-pay img{width:144px;height:60px;} /* shown at its own size: the image is small, scaling it up blurs it */
.pff-seal:not(:has(img)){display:none;}
.pf2026 .pff .pff-strip a:link,.pf2026 .pff .pff-strip a:visited{color:var(--pf-ink);}
.pf2026 .pff .pff-strip a:hover{color:var(--pf-blue);}

/* Software Downloads form (new content, pfc-dl*): a card with the labels above the inputs */
.pf2026 #content .pfc-dlform{max-width:36rem;margin:1.25rem 0 2rem;padding:1.5rem 1.6rem 1.25rem;background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);box-shadow:0 1px 2px rgba(14,27,42,.05),0 6px 18px rgba(14,27,42,.06);}
.pf2026 #content .pfc-dlform form{margin:0;}
/* undo the old CSS for form labels and spans (right-aligned 120px labels, spans moved 600px right) */
.pf2026 #content .pfc-dlform label,.pf2026 #content .pfc-dlform span{position:static;left:auto;width:auto;text-align:left;margin:0;}
.pf2026 #content .pfc-dlform input{position:static;left:auto;}
.pf2026 #content .pfc-dlfield{margin:0 0 1.15rem;}
.pf2026 #content .pfc-dlform .pfc-dlfield label{display:block;margin:0 0 .35rem;font-weight:600;color:var(--pf-ink);}
.pf2026 #content .pfc-dlform input[type="email"],.pf2026 #content .pfc-dlform input[type="text"]{
  box-sizing:border-box;height:44px;margin:0;padding:0 .8rem;font:inherit;font-size:1rem;color:var(--pf-ink);
  background:#fff;border:1px solid #B8C2CC;border-radius:8px;
}
.pf2026 #content .pfc-dlform input[type="email"]{width:100%;max-width:26rem;}
.pf2026 #content .pfc-dlform input:focus{outline:none;border-color:var(--pf-blue);box-shadow:0 0 0 3px rgba(41,140,255,.25);}
.pf2026 #content .pfc-dlform .pfc-dlnum{display:flex;align-items:center;gap:.75rem;}
.pf2026 #content .pfc-dlnum img{flex:none;width:102px;height:35px;margin:0;} /* the graphic has its own border */
.pf2026 #content .pfc-dlnum input{width:8rem;}
.pf2026 #content .pfc-dlform .pfc-dlhint{display:block;margin-top:.4rem;font-size:.85rem;color:var(--pf-muted);}
.pf2026 #content .pfc-dlsubmit{margin:1.4rem 0 1rem;}
.pf2026 #content .pfc-dlsubmit .btn1{float:none;margin:0;}
.pf2026 #content .pfc-dlnote{margin:0 0 .4rem;font-size:.9rem;}
.pf2026 #content .pfc-dlnote.pfc-dlsmall{font-size:.8rem;color:var(--pf-muted);}
@media (max-width:640px){
  .pf2026 #content .pfc-dlform{padding:1.15rem 1rem 1rem;}
  .pf2026 #content .pfc-dlform input[type="email"],.pf2026 #content .pfc-dlsubmit .btn1{width:100%;max-width:none;}
  .pf2026 #content .pfc-dlnum input{flex:1;width:auto;min-width:0;}
}

/* cookie banner */
.pf2026 .consent-banner{
  position:fixed;left:16px;right:16px;bottom:16px;width:auto;height:auto;z-index:1000;
  max-width:760px;margin:0 auto;padding:0;background:#fff;color:var(--pf-body);
  border:1px solid var(--pf-line);border-top:3px solid var(--pf-blue);border-radius:10px;font:400 .92rem/1.5 var(--pf-text);
  box-shadow:0 24px 50px -20px rgba(14,27,42,.45);
}
.pf-consent{display:flex;align-items:center;gap:1.25rem;padding:1rem 1.25rem;}
.pf-consent p{margin:0;flex:1 1 auto;}

/* video pop-up */
.pf2026 #YTvid{display:flex;align-items:center;justify-content:center;background:rgba(9,18,28,.9);padding:4vh 4vw;box-sizing:border-box;}
.pf2026 #YTvid span{display:block;position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;max-width:1100px;padding-top:0;transform:none;}
.pf2026 #YTvid div{padding-top:0;border-top:0;border-radius:8px;overflow:hidden;margin:0;}
.pf2026 #YTvid button{top:-3rem;right:0;width:2.5rem;height:2.5rem;padding:0;font:400 2rem/2.5rem var(--pf-text);background:transparent;color:#fff;border-radius:50%;}
.pf2026 #YTvid button:hover{background:rgba(255,255,255,.15);}

/* =====================================================================
   RESPONSIVE
===================================================================== */
/* small desktops: tighten the top bar so the menu and buttons fit */
@media (min-width:1024px) and (max-width:1199px){
  .pfh-inner{gap:1rem;}
  .pf2026 .pfh-top,.pf2026 a.pfh-top:link,.pf2026 a.pfh-top:visited{padding:0 .6rem;}
  .pfh-actions{gap:.25rem;}
}

@media (max-width:1023px){
  .pfh-inner{min-height:66px;gap:.75rem;}
  .pfh-logo img{height:38px;}
  .pfh-actions{margin-left:auto;}
  .pfh-toggle{display:inline-flex;border:1px solid var(--pf-line);}

  .pfh-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--pf-line);box-shadow:0 24px 40px -20px rgba(14,27,42,.45);
    max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain;
  }
  .pf-menu-open .pfh-nav{display:block;}
  .pfh-list{display:block;padding:.25rem 0;}
  .pfh-item{border-bottom:1px solid var(--pf-line);}
  .pf2026 .pfh-top,.pf2026 a.pfh-top:link,.pf2026 a.pfh-top:visited{
    width:100%;height:auto;min-height:54px;justify-content:space-between;padding:0 var(--pf-gutter);font-size:1.08rem;text-align:left;
  }
  body[data-section] .pfh-item > .pfh-top{box-shadow:none;}
  .pfh-drop,.pfh-mega{
    position:static;transform:none;width:auto;min-width:0;border:0;border-radius:0;box-shadow:none;
    padding:0 0 .75rem;background:#fff;
  }
  .pfh-item.is-open > .pfh-mega{display:block;}
  .pf2026 .pfh-drop a:link,.pf2026 .pfh-drop a:visited{padding:.65rem var(--pf-gutter);border-radius:0;font-size:1rem;}
  .pf2026 .pfh-mega a.pfh-prod:link,.pf2026 .pfh-mega a.pfh-prod:visited{padding:.7rem var(--pf-gutter);}
  .pfh-mega-side{border:0;padding:0;}
  .pfh-mega-side h2{padding:.8rem var(--pf-gutter) .3rem;}
  .pfh-sep{margin:.4rem var(--pf-gutter);}
  .pfh-nav-extra{display:block;padding:1rem var(--pf-gutter) 1.5rem;}
  .pfh-nav-extra ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;}
  .pf2026 .pfh-nav-extra a:link,.pf2026 .pfh-nav-extra a:visited{color:var(--pf-blue);font-weight:600;text-decoration:none;}
  /* the current section's pages at the top of the menu (MENU_SECTION_PAGES in the JS) */
  .pfh-nav-section{display:block;padding:.9rem var(--pf-gutter) 1rem;background:var(--pf-paper);border-bottom:1px solid var(--pf-line);}
  .pf2026 .pfh-nav-section-title{margin:0 0 .5rem;font:500 .72rem/1.4 var(--pf-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-blue);}
  .pfh-nav-section ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;gap:0 1rem;}
  .pf2026 .pfh-nav-section a:link,.pf2026 .pfh-nav-section a:visited{
    display:block;padding:.45rem 0 .45rem .6rem;border-left:2px solid transparent;color:var(--pf-ink);font-size:.95rem;line-height:1.3;text-decoration:none;
  }
  .pf2026 .pfh-nav-section a:hover{color:var(--pf-blue);}
  .pf2026 .pfh-nav-section li.is-current a{border-left-color:var(--pf-expert);color:var(--pf-blue);font-weight:600;}

  /* section menu becomes one "pages in this section" panel */
  .pfx-head{flex-wrap:wrap;}
  .pfx-head.has-crumb{padding-top:.9rem;}
  .pf2026 .pfx-head #breadcrumb{position:static;order:-1;flex:1 1 100%;white-space:normal;margin:0 0 .2rem;}
  .pfx-actions{width:100%;}
  .pfx-toggle{
    display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
    margin:0 0 .75rem;padding:.75rem 1rem;box-sizing:border-box;
    background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);
    font:600 1rem/1.3 var(--pf-display);color:var(--pf-ink);text-align:left;cursor:pointer;
  }
  .pfx-toggle .pfh-chev{flex:0 0 auto;}
  .pfx-toggle[aria-expanded="true"] .pfh-chev{transform:rotate(-135deg);margin-top:3px;}
  .pfx-toggle-here{font-family:var(--pf-text);}
  .pfx-list{display:none;margin:0 0 1rem;padding:.5rem 0;background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-r);}
  .pfx-nav.is-open .pfx-list{display:block;}
  .pfx-item{border-bottom:1px solid var(--pf-line);}
  .pfx-item:last-child{border-bottom:0;}
  .pf2026 .pfx-top,.pf2026 a.pfx-top:link,.pf2026 a.pfx-top:visited{
    width:100%;padding:.75rem 1rem;box-shadow:none!important;color:var(--pf-ink);pointer-events:none;
  }
  .pf2026 a.pfx-top:link,.pf2026 a.pfx-top:visited{pointer-events:auto;}
  .pfx-top .pfh-chev,.pfx-here,.pfx-more{display:none;}
  .pf2026 a.pfx-top:link,.pf2026 a.pfx-top:visited{font-weight:500;white-space:normal;}
  .pf2026 .pfx-list a[aria-current="page"]{color:var(--pf-blue);background:var(--pf-tint);border-radius:6px;}
  .pfx-drop{display:block;position:static;border:0;box-shadow:none;padding:0 .5rem .5rem;min-width:0;}
  .pf2026 .pfx-drop a:link,.pf2026 .pfx-drop a:visited{padding:.55rem .75rem;}

  .pff-grid{grid-template-columns:1fr 1fr 1fr;}
  .pff-brand{grid-column:1/-1;}

  .pf2026 #content .pfc-hero-grid{grid-template-columns:1fr;gap:1.8rem;}
  .pf2026 #content .pfc-shot{order:-1;}
  .pf2026 #content .pfc-cards,.pf2026 #content .pfc-quotes{grid-template-columns:1fr;}
  .pf2026 #content .pfc-readout{grid-template-columns:repeat(2,1fr);gap:1.2rem 1rem;}
  .pf2026 #content .pfc-readout p:nth-child(3){border-left:0;}
  .pf2026 #content .pfc-resources{grid-template-columns:1fr 1fr;}
}

@media (max-width:900px){
  .pf2026 #content > h2,.pf2026 #content > a > h2{padding-left:30px;}
  .pf2026 #content > h2::before,.pf2026 #content > a > h2::before{left:0;width:20px;height:20px;}
}

@media (max-width:640px){
  .pf2026 #content .answerbox{padding-right:3rem;background-size:30px auto;background-position:right .5rem top .5rem;}
  body.pf2026{--pf-gutter:16px;}
  .pfh-inner{gap:.5rem;}
  .pfh-logo img{height:34px;}
  .pfh-actions{gap:.25rem;}
  .pfh-icon{min-width:40px;height:40px;padding:0 .35rem;}
  .pfx-name{font-size:1.2rem;}
  .pfx-icon{width:40px;height:40px;align-self:flex-start;}
  .pfx-desc{font-size:.9rem;}
  .pfx-actions .pf-btn{flex:1 1 0;}
  .pff-grid{grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem;padding-top:2.5rem;}
  .pff-base{flex-direction:column;align-items:flex-start;padding-bottom:1.5rem;}
  .pf-consent{flex-direction:column;align-items:stretch;gap:.85rem;}

  .pf2026 #breadcrumb{font-size:.75rem;}
  .pf2026 #breadcrumb nobr{white-space:normal;}
  .pf2026 .pfx-head #breadcrumb nobr{display:inline-block;white-space:nowrap;} /* in the section header: wrap between items only */
  .pf2026 .pfx-head #breadcrumb nobr + nobr{margin-left:.4em;} /* the space before each >> */
  .pf2026 #content{padding-top:1.75rem;padding-bottom:2.5rem;font-size:1rem;}
  .pf2026 #content h1,.pf2026 #content .h1title,.pf2026 #content .title{font-size:1.7rem;}
  .pf2026 #content h2{font-size:1.4rem;margin-top:2.75rem;}
  .pf2026 #content h3{font-size:1.12rem;}
  .pf2026 #content p.intro{font-size:1.06rem;}

  .pf2026 #content img.stdimgright,.pf2026 #content img.stdimgrightnoborder,.pf2026 #content img.stdimgright2,
  .pf2026 #content img.stdimgright2noborder,.pf2026 #content div.stdimgright2noborder,
  .pf2026 #content img.stdimgleft,.pf2026 #content img.stdimgleftnoborder,
  .pf2026 #content img.stdimgleft2noborder,.pf2026 #content img.stdimgleftindentnoborder{
    float:none;display:block;max-width:100%;margin:.5rem auto 1.25rem;
  }
  .pf2026 #content img.stdimgright80noborder,
  .pf2026 #content blockquote img.stdimgright2noborder{float:right;display:inline;max-width:72px;margin:0 0 .5rem 1rem;}
  .pf2026 #content img.stdimgleft80noborder{float:left;max-width:64px;}
  /* small PDF / online-guide icons in front of a download link (User Guides,
     Verified Results): icon floats beside the link, not on its own line */
  .pf2026 #content a > img:is([src*="/general/pdf_1_64"],[src*="/general/infobook1_64"]){float:left;display:inline;width:48px;max-width:48px;height:auto;margin:.1rem 1rem .5rem 0;}
  .pf2026 #content p:has(> a > img[src*="/general/pdf_1_64"], > a > img[src*="/general/infobook1_64"])::after{content:"";display:block;clear:both;}
  .pf2026 #content a:has(> img:is([src*="/general/pdf_1_64"],[src*="/general/infobook1_64"])) + br{display:none;}
  .pf2026 #content a:has(> img:is([src*="/general/pdf_1_64"],[src*="/general/infobook1_64"])) ~ a{display:block;overflow:hidden;}
  .pf2026 #content a:has(> img:is([src*="/general/pdf_1_64"],[src*="/general/infobook1_64"])) ~ span{display:block;overflow:hidden;}
  .pf2026 #content img[width="95"],.pf2026 #content img[width="80"]{float:left;max-width:64px;margin:0 1rem .5rem 0;display:inline;}

  .pf2026 #content .featureleftsmall,.pf2026 #content .featurerightsmall,
  .pf2026 #content div .featureleftsmall,.pf2026 #content div .featurerightsmall{float:none;width:auto;}
  .pf2026 #content .feature{padding:1.15rem;}
  .pf2026 #content blockquote{padding:1.15rem;}

  .pf2026 #content .btn1,.pf2026 #content .btn1right,.pf2026 #content .btn1rightwithmargin,
  .pf2026 #content p > a > input.btn1,.pf2026 #content p > a > input.btn1right,
  .pf2026 #content .btn1center,.pf2026 #content .btn1center2{float:none;display:block;width:100%;margin:0 0 .75rem;
    white-space:normal;height:auto;letter-spacing:.01em;line-height:1.3;}
  .pf2026 #content .pf-btnrun{display:flex;flex-direction:column-reverse;}
  .pf2026 #content .pfc-specs-icons li{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.75rem 0;}
  .pf2026 #content .pfc-specs-icons span{flex:none;}
  .pf2026 #content input[type=email].normal100{width:100%;}
  .pf2026 #content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* old layout tables (no class, no border: used to place a form or columns
     side by side) stack their cells on phones; data tables scroll instead */
  .pf2026 #content table:not([class]):not([border]),
  .pf2026 #content table:not([class]):not([border]) > tbody,
  .pf2026 #content table:not([class]):not([border]) > tbody > tr,
  .pf2026 #content table:not([class]):not([border]) > tbody > tr > td{display:block;width:auto!important;height:auto!important;overflow:visible;}
  .pf2026 #content table:not([class]):not([border]) > tbody > tr{height:auto!important;}
  .pf2026 #content table:not([class]):not([border]) > tbody > tr > td{padding:.15rem 0!important;}
  .pf2026 #content table:not([class]):not([border]) td img[align]{float:none;}
  /* sitemap (a table of grey section bars + indented links): on phones a plain list,
     without the spacer rows and the narrow first column */
  .pf2026 #content table:has(td.normal100[bgcolor]):has(a.smallText1) tr:has(> td.small80){display:none;}
  .pf2026 #content table:has(td.normal100[bgcolor]):has(a.smallText1) td[width="10"]{display:none;}
  .pf2026 #content table:has(td.normal100[bgcolor]):has(a.smallText1) td.normal100[bgcolor]{margin-top:1.1rem;padding:.4rem .75rem!important;border-radius:6px;}
  .pf2026 #content table:has(td.normal100[bgcolor]):has(a.smallText1) td.small90{padding:.3rem 0!important;}
  .pf2026 #content div[style*="width:320px"]{float:none!important;width:auto!important;margin:0 0 1.5rem;}
  .pf2026 #content .productarea{grid-template-columns:auto 1fr;grid-template-areas:"name name" "gbp buy" "usd buy";gap:.35rem 1rem;padding:.9rem 1rem;}
  .pf2026 #content .productarea .productpriceGBP,.pf2026 #content .productarea .productpriceUSD{justify-self:start;}
  .pf2026 #content .productarea .productbuynow{justify-self:end;}
  .pf2026 #content .productarea .productdownloadontheappstore{grid-column:1 / -1;grid-row:auto;justify-self:start;}

  .pf2026 #content .pfc-hero{padding-top:2rem;padding-bottom:2rem;}
  .pf2026 #content .pfc-hero h1{font-size:2rem;}
  .pf2026 #content .pfc-hero-plain h1{font-size:min(1.6rem,6.3vw);} /* each line fits on narrow phones */
  .pf2026 #content .pfc-hero-wide > h1 .pfc-line{display:block;}
  .pf2026 #content .pfc-hero-wide > h1{margin-bottom:1.25rem;}
  .pf2026 #content .pfc-hero-wide > .pfc-news{margin-top:1.75rem;}
  .pf2026 #content .pfc-lede{font-size:1.05rem;}
  .pf2026 #content .pfc-actions .pf-btn{flex:1 1 100%;}
  .pf2026 #content .pfc-section{padding:2.25rem 0;}
  .pf2026 #content .pfc-readout b{font-size:1.45rem;}
  .pf2026 #content .pfc-resources{grid-template-columns:1fr;}
  .pf2026 #content .pfc-users{gap:.3rem 1.25rem;}
  .pf2026 #content .pfc-users-scroll{gap:0;}
  .pf2026 #content .pfc-marquee{margin:1rem 0 2.25rem;}
  .pf2026 #content .pfc-users-scroll li{padding:0 1rem;}
  .pf2026 #content .pfc-users li{font-size:.95rem;}
  .pf2026 #content .pfc-final h2{font-size:1.6rem;}
}

@media (prefers-reduced-motion:reduce){
  .pf2026 *{transition:none!important;}
  .pf2026 #content a.YTvid:hover > img:first-child{transform:none;}
}