/* Fonts (generated by fontFaceCss in vendor.mjs) */
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-latin-600-normal.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:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-latin-700-normal.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:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/manrope-latin-800-normal.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:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-sans-latin-400-normal.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:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.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:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/dm-sans-latin-600-normal.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:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.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:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-latin-600-normal.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:"Dancing Script";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/dancing-script-latin-600-normal.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:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/great-vibes-latin-400-normal.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:"Homemade Apple";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/homemade-apple-latin-400-normal.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:"Noto Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-800-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"DM Sans fallback";font-weight:400;src:local("Arial"),local("ArialMT"),local("Arimo"),local("Liberation Sans"),local("LiberationSans");size-adjust:103.73%;ascent-override:95.63%;descent-override:29.88%;line-gap-override:0%}
@font-face{font-family:"DM Sans fallback 2";font-weight:400;src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");size-adjust:104.63%;ascent-override:94.81%;descent-override:29.63%;line-gap-override:0%}
@font-face{font-family:"DM Sans fallback";font-weight:500;src:local("Arial"),local("ArialMT"),local("Arimo"),local("Liberation Sans"),local("LiberationSans");size-adjust:105.43%;ascent-override:94.09%;descent-override:29.4%;line-gap-override:0%}
@font-face{font-family:"DM Sans fallback 2";font-weight:500;src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");size-adjust:106.35%;ascent-override:93.28%;descent-override:29.15%;line-gap-override:0%}
@font-face{font-family:"DM Sans fallback";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:100.34%;ascent-override:98.87%;descent-override:30.9%;line-gap-override:0%}
@font-face{font-family:"DM Sans fallback 2";font-weight:600;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:106.9%;ascent-override:92.8%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"DM Sans fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:101.86%;ascent-override:97.39%;descent-override:30.44%;line-gap-override:0%}
@font-face{font-family:"DM Sans fallback 2";font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:108.52%;ascent-override:91.41%;descent-override:28.57%;line-gap-override:0%}
@font-face{font-family:"Manrope fallback";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:97.92%;ascent-override:108.86%;descent-override:30.64%;line-gap-override:0%}
@font-face{font-family:"Manrope fallback 2";font-weight:600;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:104.68%;ascent-override:101.83%;descent-override:28.66%;line-gap-override:0%}
@font-face{font-family:"Manrope fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:99.5%;ascent-override:107.13%;descent-override:30.15%;line-gap-override:0%}
@font-face{font-family:"Manrope fallback 2";font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:106.38%;ascent-override:100.21%;descent-override:28.2%;line-gap-override:0%}
@font-face{font-family:"Manrope fallback";font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold");size-adjust:101.11%;ascent-override:105.43%;descent-override:29.67%;line-gap-override:0%}
@font-face{font-family:"Manrope fallback 2";font-weight:800;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:108.09%;ascent-override:98.62%;descent-override:27.75%;line-gap-override:0%}

/* PDF ProMaster – site styles (every page). Design 3: white page, navy and
   teal two-tone headings (like the logo's "PDF ProMaster"), navy buttons, and
   soft panels in the logo's coral, yellow and teal with live demos of our tools. Tool internals (forms, page grids, Workspace, editor) live in
   tools.css, which only tool pages load, at the end of the page. */

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --soft: #f4f6f9;
  --soft-2: #e9edf2;
  --desk: #f4f6f9;
  --ivory: #f4f6f9;
  --ivory-2: #e9edf2;
  --navy: #16233f;                /* the logo's outline colour */
  --ink: #16233f;
  --ink-2: #4a5670;
  --ink-3: #5f6b82;
  --grey-head: #0f7a70;           /* the second half of two-tone headings: the "ProMaster" teal */
  --line: #e4e8ee;
  --line-strong: #cdd4de;
  --primary: #0f7a70;             /* accents: focus, selection, progress */
  --primary-deep: #0b5f57;
  --primary-soft: #dcf2ee;
  --primary-tint: #effaf8;
  --blue: #0f7a70;                /* buttons inside demos */
  --yellow: #ffd23f;              /* from the logo */
  --coral: #ff7a59;               /* from the logo */
  --teal: #2ec4b6;                /* from the logo */
  --violet: #9747ff;
  --badge: #dcf2ee;
  --alert: #b42318;
  --alert-bg: #fef1ef;
  --ok: #157347;
  --ok-bg: #eaf6ef;
  --focus: #0f7a70;
  --radius-sheet: 16px;
  --radius-ctl: 8px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
  --shadow-md: 0 1px 3px rgb(0 0 0 / 6%), 0 8px 24px -10px rgb(0 0 0 / 14%);
  --shadow-lg: 0 2px 6px rgb(0 0 0 / 6%), 0 24px 60px -20px rgb(0 0 0 / 28%);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* "… fallback" fonts are size-matched stand-ins used while ours load (see
     fontFaceCss in vendor.mjs), so text doesn't jump when the font arrives. */
  --font: "DM Sans", "DM Sans fallback", "DM Sans fallback 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", "Manrope fallback", "Manrope fallback 2", "DM Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --wrap: 1240px;
  /* Grain for the colourful panels: a small tiled picture (6 KB). */
  --grain: url("/assets/grain.png");
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
::selection { background: #c8ece6; }

h1, h2, h3 { text-wrap: balance; font-family: var(--font); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; margin: 0; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; font-weight: 500; }
p { margin: 0; }
.lede { font-size: 1.15rem; line-height: 1.5; color: var(--ink-2); max-width: 38em; }
.grey { color: var(--grey-head); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: 8px 12px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 12px; top: 12px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap, .keep { white-space: nowrap; }

/* Small mono labels, like code comments */
.eyebrow { display: inline-block; font-size: 0.9rem; font-weight: 600; color: var(--primary); }
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--b, var(--badge)); font-size: 0.85rem; font-weight: 600; color: var(--bt, #0b5f57); vertical-align: middle; white-space: nowrap; letter-spacing: 0; }
.section-head { display: grid; gap: 0; margin-bottom: 40px; max-width: 820px; }
.section-head h2 .grey { display: block; }
.section-head p { margin-top: 16px; color: var(--ink-2); max-width: 36em; font-size: 1.05rem; }

/* ---------- Buttons ---------- */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius-ctl);
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 400; font-size: 1rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--ease);
}
.btn:hover { border-color: var(--navy); }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover, .btn-dark:hover { background: #0b1630; border-color: #0b1630; color: #fff; }
.btn-ghost { border-radius: 999px; }
.btn-big { min-height: 56px; padding: 0 28px; font-size: 1.12rem; }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 0.92rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.icon-btn { width: 36px; height: 36px; padding: 0; min-height: 36px; }
.icon-btn svg { width: 18px; height: 18px; }
.btn-small.btn-primary { color: #fff; }
.link-btn { all: unset; cursor: pointer; color: var(--ink-2); font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }
.link-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.text-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Tool icons: white symbol on a coloured square ---------- */

.tile-coral { --tile: #e5484d; } .tile-amber { --tile: #d97706; } .tile-blue { --tile: #2f6fed; }
.tile-teal { --tile: #0f9f83; } .tile-pink { --tile: #d6409f; } .tile-violet { --tile: #7c4ddb; }
.tool-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; }
.tool-icon.tile { background: var(--tile); }
.tool-icon svg { width: 54%; height: 54%; }
.tool-icon-lg { width: 52px; height: 52px; border-radius: 13px; }
.tool-icon-sm { width: 28px; height: 28px; border-radius: 7px; }
.tool-icon-sm svg { width: 58%; height: 58%; }

/* Small file-type label used in file lists and on download buttons */
.ft-chip { display: inline-block; padding: 1px 7px; border-radius: 5px; color: #fff; font: 800 0.7rem/1.6 var(--font-display); letter-spacing: 0.04em; vertical-align: middle; }
.btn .ft-chip { margin-right: 2px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 60%); }

/* ---------- Header ---------- */

.site-head { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / 92%); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.site-head > .wrap { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 2px; flex: none; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.03em; }
.brand-mark { width: 32px; height: 32px; flex: none; margin-right: 4px; }
.brand-word span { color: #0f7a70; font-weight: 800; }

.site-nav { display: flex; align-items: center; gap: 0; margin-left: 22px; }
.nav-link, .site-nav > a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 11px; border-radius: 8px;
  color: var(--ink); font-size: 0.97rem; font-weight: 400; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s;
}
.nav-link:hover, .site-nav > a:hover, .menu[open] > .nav-link { background: var(--soft); }
.site-nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.head-cta { min-height: 40px; padding: 0 16px; font-size: 0.95rem; }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.chev { width: 14px; height: 14px; opacity: .7; transition: transform .2s var(--ease); }
.menu[open] > summary .chev, .lang-menu[open] .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 12px); left: -12px; z-index: 50;
  width: min(920px, calc(100vw - 48px)); padding: 24px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  animation: pop .16s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 20px; }
.mega-col h2 { font-size: 0.78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 2px 8px 10px; }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 0.93rem; color: var(--ink); text-decoration: none; }
.mega a:hover, .mega a:focus-visible { background: var(--soft); }
.mega .tool-icon-sm { width: 24px; height: 24px; border-radius: 6px; }
.mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--soft); font-size: 0.92rem; color: var(--ink-2); }
.mega-foot b { color: var(--ink); font-weight: 500; }
.mega .text-link:hover { background: none; }
.mega-single { width: min(360px, calc(100vw - 48px)); }
.mega-single .mega-grid { grid-template-columns: 1fr; }

/* Language button */
.lang-menu { position: relative; flex: none; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 0.86rem; color: var(--ink); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { border-color: var(--ink); }
.lang-menu .globe { width: 17px; height: 17px; }
.lang-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); animation: pop .16s var(--ease); }
.lang-list a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.lang-list a:hover, .lang-list a:focus-visible { background: var(--soft); }
.lang-list a[aria-current] { font-weight: 600; }
.lang-list .tick { width: 16px; height: 16px; margin-left: auto; }
/* The "View this page in …?" question floats at the bottom, so it never
   pushes the page down (no layout shift). */
.lang-ask { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); animation: rise .3s var(--ease); }
.lang-ask .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; }
.lang-ask-text { margin-right: auto; }

/* Header search (search-ui.js) */
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); display: grid; pointer-events: none; }
.search-icon svg { width: 19px; height: 19px; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.site-search { position: relative; width: 240px; }
.site-search[hidden] { display: none; }
.search-box { position: relative; }
.search-box input { width: 100%; height: 40px; padding: 0 34px 0 38px; font: inherit; font-size: 0.93rem; color: var(--ink); background: var(--soft); border: 1px solid transparent; border-radius: 8px; transition: border-color .15s, background-color .15s; }
.search-box input::placeholder { color: var(--ink-3); }
.search-box input:hover { background: var(--soft-2); }
.search-box input:focus { outline: none; background: #fff; border-color: var(--primary); }
.search-box .search-icon { left: 12px; }
.search-box .search-icon svg { width: 17px; height: 17px; }
.search-key { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 0.75rem; line-height: 1; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--ink-3); background: #fff; }
.search-box input:focus ~ .search-key, .search-box input:not(:placeholder-shown) ~ .search-key { display: none; }
.search-open, .menu-btn { display: none; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); cursor: pointer; }
.search-open svg, .menu-btn svg { width: 19px; height: 19px; }
.search-pop { position: absolute; z-index: 50; top: calc(100% + 10px); right: 0; width: 380px; max-width: calc(100vw - 32px); padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
.search-pop[hidden] { display: none; }
.search-label { margin: 4px 8px 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.search-list { list-style: none; margin: 0; padding: 0; max-height: min(420px, 70vh); overflow-y: auto; }
.search-list[hidden] { display: none; }
.search-list a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.search-list a:hover, .search-list [aria-selected="true"] a { background: var(--soft); }
.search-text { display: grid; min-width: 0; }
.search-text b { font-weight: 500; font-size: 0.95rem; }
.search-text small { font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phone menu */
.nav-mobile { display: none; }
.m-panel { position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 16px 20px 40px; animation: fade .16s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.m-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.m-quick a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: var(--soft); text-decoration: none; font-size: 0.95rem; color: var(--ink); line-height: 1.3; }
.m-groups > .btn { width: 100%; }
.m-group + .m-group { margin-top: 20px; }
.m-group h2 { font-size: 0.78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 4px 6px; }
.m-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.m-group a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px; color: var(--ink); text-decoration: none; font-size: 0.93rem; line-height: 1.3; }
.m-group .tool-icon-sm { width: 24px; height: 24px; }
.m-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.m-links a { color: var(--ink-2); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
body.menu-open { overflow: hidden; }
/* A blurred header would trap the fixed menu panel inside it, so the blur
   is switched off while the phone menu is open. */
body.menu-open .site-head, .site-head:has(.nav-mobile[open]) { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }

@media (max-width: 1180px) {
  .site-nav > a.nav-x, .head-cta { display: none; }
}
@media (max-width: 960px) {
  .site-nav { display: none; }
  .nav-mobile { display: block; }
  .menu-btn { display: grid; }
  .menu-btn .i-close { display: none; }
  .nav-mobile[open] .menu-btn .i-open { display: none; }
  .nav-mobile[open] .menu-btn .i-close { display: block; }
  .site-search { width: auto; position: static; }
  .search-open { display: grid; }
  .site-search .search-box { display: none; }
  .site-search.is-open .search-box { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 10px 16px 14px; background: #fff; border-bottom: 1px solid var(--line); }
  .site-search.is-open .search-box .search-icon { left: 29px; top: 32px; }
  .site-search.is-open .search-box input { height: 46px; font-size: 1rem; }
  .site-search.is-open .search-pop { position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none; border: 0; padding: 0; }
  .search-key { display: none; }
}
@media (max-width: 420px) {
  .site-head > .wrap { padding: 0 14px; gap: 6px; }
  .brand { font-size: 1.02rem; }
  .brand-mark { width: 28px; height: 28px; }
  .head-tools { gap: 6px; }
  .lang-menu summary { padding: 0 9px; }
}
@media (max-width: 360px) {
  .lang-menu .lang-code, .lang-menu .chev { display: none; }
  .lang-menu summary { width: 40px; padding: 0; justify-content: center; }
}

/* ---------- Footer ---------- */

.site-foot { margin-top: 128px; border-top: 1px solid var(--line); padding: 64px 0 40px; font-size: 0.92rem; color: var(--ink-2); }
.foot-top { display: grid; grid-template-columns: 1.2fr 3fr; gap: 48px; }
.foot-brand p { margin-top: 14px; max-width: 22em; }
.foot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.foot-grid h2 { font-size: 0.78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-grid a, .foot-note a { color: var(--ink); text-decoration: none; }
.foot-grid a:hover, .foot-note a:hover { text-decoration: underline; }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.foot-note { margin: 0; }
.foot-row { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-legal { font-size: 0.8rem; color: var(--ink-3); }
.lang-switch { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lang-switch [aria-current] { font-weight: 600; color: var(--ink); }
@media (max-width: 960px) {
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .site-foot { margin-top: 88px; padding-top: 48px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

/* ---------- Colourful grainy panels (the "canvas" behind demos) ---------- */

.panel-art { position: relative; overflow: hidden; isolation: isolate; background-color: var(--pa, #e9d9f7); background-image: var(--pg, none); }
.panel-art::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grain); background-size: 160px 160px; opacity: .9; }
.panel-art > * { z-index: 1; }
.pa-brand { --pa: #e3f5f2; --pg: radial-gradient(45% 60% at 8% 85%, rgb(255 122 89 / 45%) 0, transparent 70%), radial-gradient(40% 55% at 95% 10%, rgb(255 210 63 / 55%) 0, transparent 70%), radial-gradient(50% 60% at 60% 40%, rgb(46 196 182 / 30%) 0, transparent 70%); }
.pa-teal { --pa: #d5f1ec; --pg: radial-gradient(50% 60% at 85% 15%, rgb(46 196 182 / 40%) 0, transparent 70%), radial-gradient(40% 50% at 10% 90%, rgb(255 210 63 / 30%) 0, transparent 70%); }
.pa-coral { --pa: #ffe1d7; --pg: radial-gradient(45% 60% at 85% 20%, rgb(255 210 63 / 40%) 0, transparent 70%), radial-gradient(45% 55% at 10% 85%, rgb(255 122 89 / 45%) 0, transparent 70%); }
.pa-yellow { --pa: #fff1bf; --pg: radial-gradient(45% 60% at 15% 20%, rgb(255 255 255 / 60%) 0, transparent 70%), radial-gradient(40% 55% at 88% 85%, rgb(255 122 89 / 30%) 0, transparent 70%); }
.pa-navy { --pa: #16233f; --pg: radial-gradient(45% 60% at 90% 10%, rgb(46 196 182 / 45%) 0, transparent 70%), radial-gradient(40% 55% at 5% 95%, rgb(255 122 89 / 35%) 0, transparent 70%); }
.pa-navy::before { opacity: .35; }
.pa-blue { --pa: #dfeafb; --pg: radial-gradient(50% 60% at 85% 15%, rgb(46 196 182 / 25%) 0, transparent 70%), radial-gradient(40% 50% at 10% 90%, rgb(255 210 63 / 25%) 0, transparent 70%); }
/* File-type panels (tool pages) */
.pa-pdf { --pa: #ffc9c2; --pg: radial-gradient(45% 60% at 12% 25%, #ffb0c8 0, transparent 70%), radial-gradient(40% 55% at 90% 80%, #ffd0a8 0, transparent 70%); }
.pa-word { --pa: #bcd3fb; --pg: radial-gradient(45% 60% at 15% 25%, #d6e4ff 0, transparent 70%), radial-gradient(40% 55% at 88% 80%, #a6c1f6 0, transparent 70%); }
.pa-excel { --pa: #b8e6c8; --pg: radial-gradient(45% 60% at 15% 25%, #d6f3df 0, transparent 70%), radial-gradient(40% 55% at 88% 80%, #9cdab3 0, transparent 70%); }
.pa-ppt { --pa: #ffcfb2; --pg: radial-gradient(45% 60% at 15% 25%, #ffe2cc 0, transparent 70%), radial-gradient(40% 55% at 88% 80%, #ffb48c 0, transparent 70%); }
.pa-image { --pa: #dbc3f2; --pg: radial-gradient(45% 60% at 15% 25%, #eadaf8 0, transparent 70%), radial-gradient(40% 55% at 88% 80%, #c7a6ea 0, transparent 70%); }
.pa-text { --pa: #d5dbe3; --pg: radial-gradient(45% 60% at 15% 25%, #e8ecf1 0, transparent 70%); }

/* Demos pause while off screen (home.js adds .is-paused). */
.panel-art.is-paused *, .panel-art.is-paused *::before, .panel-art.is-paused *::after { animation-play-state: paused !important; }

/* The demo cursor (Figma-style black arrow with a white edge) */
.cur { position: absolute; left: 0; top: 0; z-index: 9; width: 3.4cqw; min-width: 16px; pointer-events: none; filter: drop-shadow(0 .3cqw .5cqw rgb(0 0 0 / 30%)); will-change: transform; }
.cur svg { width: 100%; height: auto; }

/* ---------- Home: hero ---------- */

.hero2 { padding: 72px 0 0; }
.hero2-top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.hero2 h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; }
.hero2 h1 .grey { display: block; color: var(--grey-head); }
.hero-lede { margin-top: 22px; font-size: 1.15rem; color: var(--ink-2); max-width: 32em; }
.hero2-side { display: grid; gap: 14px; justify-items: stretch; }
.home-search { position: relative; scroll-margin-top: 90px; }
.home-search input { width: 100%; height: 60px; padding: 0 22px 0 54px; font: inherit; font-size: 1.08rem; color: var(--ink); background: #fff; border: 1.5px solid var(--navy); border-radius: 999px; transition: box-shadow .2s; }
.home-search input::placeholder { color: var(--ink-3); }
.home-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgb(15 122 112 / 16%); }
.home-search .search-icon { left: 22px; color: var(--ink); }
.home-search .search-icon svg { width: 21px; height: 21px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-buttons .btn { flex: 1 1 auto; min-height: 56px; font-size: 1.1rem; }
.hero-buttons .btn-ghost { border-color: var(--line-strong); }
.home-search-status { min-height: 1.4em; margin: 0; font-size: 0.95rem; color: var(--ink); }
.home-search-status:empty { display: none; }
.home-search-status.is-empty { color: var(--ink-2); }
.badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.92rem; color: var(--ink-2); }
.badges li { display: inline-flex; align-items: center; gap: 6px; }
.badges svg { width: 16px; height: 16px; color: var(--primary); }

/* The big animated demo under the headline: our Workspace in a browser
   window, on a panel with the logo's three pages behind it. */
.showcase { margin-top: 48px; border-radius: 20px; }
.sc-stage { position: relative; container-type: inline-size; aspect-ratio: 1240 / 640; }
.sc-stage * { box-sizing: border-box; }
.sc-art { position: absolute; z-index: 0; width: 30cqw; height: 38cqw; border-radius: 2.2cqw; border: .35cqw solid var(--navy); }
.sc-art-1 { left: -6cqw; top: 14cqw; background: var(--coral); transform: rotate(-14deg); }
.sc-art-2 { left: -2cqw; top: 22cqw; background: var(--yellow); transform: rotate(-5deg); }
.sc-art-3 { right: -7cqw; top: 6cqw; background: var(--teal); transform: rotate(9deg); }
.sc-win { position: absolute; z-index: 1; left: 6cqw; right: 6cqw; top: 4cqw; bottom: 0; background: #fff; border-radius: 1.4cqw 1.4cqw 0 0; box-shadow: 0 2cqw 5cqw -1.5cqw rgb(22 35 63 / 45%); overflow: hidden; font-size: 1.15cqw; color: var(--navy); }
.sc-chrome { height: 3.6cqw; display: flex; align-items: center; gap: .7cqw; padding: 0 1.4cqw; background: #f3f5f8; border-bottom: 1px solid #e4e8ee; }
.sc-chrome i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--c); }
.sc-url { margin: 0 auto; display: flex; align-items: center; gap: .6cqw; height: 2.3cqw; padding: 0 1.6cqw; border-radius: 99cqw; background: #fff; border: 1px solid #e4e8ee; color: #5b6578; font-size: 1.05cqw; }
.sc-url svg { width: 1.1cqw; height: 1.1cqw; }
.sc-safe { display: flex; align-items: center; gap: .5cqw; font-size: 1cqw; color: #0f7a70; font-weight: 600; }
.sc-safe::before { content: "✓"; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #0f7a70; color: #fff; display: grid; place-items: center; font-size: .9cqw; }
.sc-app { position: absolute; left: 0; right: 0; top: 3.6cqw; height: 5.4cqw; display: flex; align-items: center; padding: 0 1.4cqw; border-bottom: 1px solid #eef0f4; }
.sc-app svg { width: 2.4cqw; height: 2.4cqw; }
.sc-app b { margin-left: .8cqw; font-family: var(--font-display); font-weight: 800; font-size: 1.35cqw; letter-spacing: -.03em; }
.sc-app b span { color: #0f7a70; }
.sc-tb { position: absolute; top: 1.3cqw; height: 2.8cqw; padding: 0 1.1cqw; display: flex; align-items: center; gap: .5cqw; border-radius: .7cqw; border: 1px solid #dfe3ea; background: #fff; font-size: 1.05cqw; white-space: nowrap; }
.sc-tb-add { left: 23cqw; }
.sc-tb-rot { left: 31.5cqw; animation: scRotBtn 12s infinite; }
.sc-tb-del { left: 38.2cqw; }
.sc-tb-wm { left: 44.4cqw; }
.sc-tb-go { right: 1.4cqw; background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; animation: scGoBtn 12s infinite; }
.sc-side { position: absolute; left: 0; top: 9cqw; bottom: 0; width: 18.6cqw; padding: 1.6cqw 1.4cqw; border-right: 1px solid #eef0f4; background: #fafbfc; }
.sc-h { font-size: 1cqw; font-weight: 600; color: #5b6578; margin-bottom: 1cqw; }
.sc-file { display: flex; align-items: center; gap: .8cqw; padding: 1cqw; margin-bottom: .8cqw; border-radius: .8cqw; background: #fff; border: 1px solid #e8ebf0; border-left: .35cqw solid var(--c); }
.sc-file em { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: .8cqw; color: #fff; padding: .15cqw .45cqw; border-radius: .3cqw; background: var(--c); }
.sc-file span { flex: 1; }
.sc-file small { color: #7a8396; font-size: .95cqw; }
.sc-drop { margin-top: 1.2cqw; padding: 1.4cqw; border: .15cqw dashed #c9d0db; border-radius: .9cqw; text-align: center; color: #5b6578; font-size: 1cqw; }
.sc-main { position: absolute; left: 18.6cqw; right: 0; top: 9cqw; bottom: 0; }
.sc-main-h { position: absolute; left: 2cqw; right: 2cqw; top: 1.6cqw; display: flex; justify-content: space-between; font-size: 1.05cqw; color: #5b6578; }
.sc-main-h b { color: var(--navy); font-weight: 600; }
.sc-page { position: absolute; width: 14cqw; height: 17cqw; padding: 1.2cqw; border-radius: 1cqw; background: #f3f5f8; }
.sc-page::before { content: ""; position: absolute; inset: 1.2cqw 1.2cqw 3cqw; border-radius: .4cqw; background: linear-gradient(var(--c), var(--c)) no-repeat 1cqw 1cqw / calc(100% - 2cqw) 1.4cqw, repeating-linear-gradient(#e1e5eb 0 .3cqw, transparent .3cqw .9cqw) no-repeat 1cqw 3.6cqw / calc(100% - 2cqw) 7.5cqw, #fff; box-shadow: 0 .15cqw .4cqw rgb(22 35 63 / 18%); }
.sc-page b { position: absolute; left: 1.2cqw; bottom: .8cqw; display: flex; align-items: center; gap: .5cqw; font-size: 1cqw; font-weight: 600; }
.sc-page b i { font-style: normal; display: grid; place-items: center; min-width: 1.7cqw; height: 1.7cqw; padding: 0 .3cqw; border-radius: .4cqw; background: var(--c); color: #fff; font-size: .9cqw; }
.sc-tick { position: absolute; right: .8cqw; top: .8cqw; z-index: 2; width: 2cqw; height: 2cqw; border-radius: 50%; border: .2cqw solid #c3cad5; background: #fff; }
.sc-pA { --c: var(--coral); } .sc-pB { --c: #3b82f6; } .sc-pC { --c: #8b5cf6; }
/* Grid: four columns from x = 2cqw, rows at y = 4.6cqw and 23.4cqw (inside .sc-main). */
.sc-p1 { left: 2cqw; top: 4.6cqw; } .sc-p2 { left: 17.4cqw; top: 4.6cqw; animation: scDown 12s infinite; } .sc-p3 { left: 32.8cqw; top: 4.6cqw; animation: scPick 12s infinite; } .sc-p4 { left: 48.2cqw; top: 4.6cqw; }
.sc-p5 { left: 2cqw; top: 23.4cqw; } .sc-p6 { left: 17.4cqw; top: 23.4cqw; z-index: 3; animation: scUp 12s infinite; } .sc-p7 { left: 32.8cqw; top: 23.4cqw; }
.sc-p3::before { animation: scTurn 12s infinite; }
.sc-p3 .sc-tick { animation: scTick 12s infinite; }
.sc-toast { position: absolute; z-index: 4; right: 2cqw; bottom: 3cqw; display: flex; align-items: center; gap: 1cqw; padding: 1.2cqw 1.6cqw; background: var(--navy); color: #fff; border-radius: 1cqw; box-shadow: 0 1.2cqw 2.4cqw rgb(22 35 63 / 35%); font-size: 1.2cqw; opacity: 0; animation: scToast 12s infinite; }
.sc-toast i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--teal); color: var(--navy); display: grid; place-items: center; font-style: normal; font-size: 1.2cqw; font-weight: 700; }
.sc-toast small { display: block; color: #b9c4d6; font-size: 1cqw; }
.sc-cursor { z-index: 6; animation: scCur 12s infinite cubic-bezier(.45, .05, .3, 1); }

/* Cursor path (stage coordinates): page A3, Rotate, page C1 dragged up, Merge & download. */
@keyframes scCur {
  0%, 3% { transform: translate(80cqw, 48cqw); }
  11% { transform: translate(64cqw, 27cqw) scale(1); }
  12.5% { transform: translate(64cqw, 27cqw) scale(.82); }
  14% { transform: translate(64cqw, 27cqw) scale(1); }
  22% { transform: translate(39.5cqw, 10.6cqw) scale(1); }
  23.5% { transform: translate(39.5cqw, 10.6cqw) scale(.82); }
  25% { transform: translate(39.5cqw, 10.6cqw) scale(1); }
  35% { transform: translate(48.5cqw, 46cqw) scale(1); }
  37% { transform: translate(48.5cqw, 46cqw) scale(.85); }
  48% { transform: translate(48.5cqw, 27cqw) scale(.85); }
  50% { transform: translate(48.5cqw, 27cqw) scale(1); }
  60% { transform: translate(86cqw, 10.6cqw) scale(1); }
  61.5% { transform: translate(86cqw, 10.6cqw) scale(.82); }
  63% { transform: translate(86cqw, 10.6cqw) scale(1); }
  80% { transform: translate(86cqw, 10.6cqw); }
  94%, 100% { transform: translate(80cqw, 48cqw); }
}
@keyframes scTick { 0%, 12% { background: #fff; border-color: #c3cad5; } 13%, 90% { background: #0f7a70 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; border-color: #0f7a70; } 94%, 100% { background: #fff; border-color: #c3cad5; } }
@keyframes scPick { 0%, 12% { box-shadow: none; } 13%, 90% { box-shadow: 0 0 0 .3cqw #0f7a70; } 94%, 100% { box-shadow: none; } }
@keyframes scTurn { 0%, 24% { transform: none; } 30%, 90% { transform: rotate(90deg) scale(.72); } 96%, 100% { transform: none; } }
@keyframes scRotBtn { 0%, 23% { background: #fff; border-color: #dfe3ea; } 23.5%, 26% { background: #e6f4f1; border-color: #0f7a70; } 27%, 100% { background: #fff; border-color: #dfe3ea; } }
@keyframes scUp { 0%, 36% { transform: none; box-shadow: none; } 38% { transform: translateY(-.6cqw) scale(1.04); box-shadow: 0 0 0 .3cqw #0f7a70, 0 1.4cqw 2.6cqw rgb(22 35 63 / 25%); } 48% { transform: translateY(-19.4cqw) scale(1.04); box-shadow: 0 0 0 .3cqw #0f7a70, 0 1.4cqw 2.6cqw rgb(22 35 63 / 25%); } 51%, 92% { transform: translateY(-18.8cqw); box-shadow: none; } 97%, 100% { transform: none; } }
@keyframes scDown { 0%, 40% { transform: none; } 48%, 92% { transform: translateY(18.8cqw); } 97%, 100% { transform: none; } }
@keyframes scGoBtn { 0%, 61% { background: var(--navy); border-color: var(--navy); } 61.5%, 63% { background: #0f7a70; border-color: #0f7a70; } 64%, 100% { background: var(--navy); border-color: var(--navy); } }
@keyframes scToast { 0%, 63% { opacity: 0; transform: translateY(1cqw); } 66%, 86% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(1cqw); } }

/* "Works with" strip */
.formats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 40px 0 0; }
.formats > span { font-size: 0.9rem; font-weight: 600; color: var(--ink-3); }
.formats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 40px; }
.formats li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--navy); letter-spacing: -0.03em; }
.formats li i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }

/* ---------- Home: tool catalogue ---------- */

.catalog-a { padding-top: 120px; scroll-margin-top: 80px; }
.filters { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 28px; padding: 0; border-bottom: 1px solid var(--line); }
.filter { font: inherit; font-size: 1.08rem; min-height: 48px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-3); cursor: pointer; display: inline-flex; align-items: center; transition: color .15s, border-color .15s; }
.filter:hover { color: var(--ink); }
.filter.is-on { color: var(--ink); border-bottom-color: var(--primary); font-weight: 500; }
.home-search-extra { margin: -12px 0 22px; font-size: 0.95rem; color: var(--ink-2); }
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.card-grid > li[hidden] { display: none; }
.card-grid.is-collapsed > li:nth-child(n+9) { display: none; }
.tool-card { position: relative; display: grid; align-content: start; gap: 6px; height: 100%; min-height: 168px; padding: 22px; background: var(--soft); border-radius: 12px; text-decoration: none; color: var(--ink); transition: background-color .2s; }
.tool-card:hover { background: var(--soft-2); }
.tool-card .tool-icon { margin-bottom: 18px; }
.tool-name { font-size: 1.12rem; font-weight: 500; letter-spacing: -0.015em; }
.tool-desc { font-size: 0.93rem; line-height: 1.45; color: var(--ink-2); }
.tool-go { position: absolute; top: 22px; right: 20px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .25s var(--ease); }
.tool-go svg { width: 18px; height: 18px; }
.tool-card:hover .tool-go, .tool-card:focus-visible .tool-go { opacity: 1; transform: none; }
.show-all { display: flex; margin-top: 24px; }
.show-all[hidden] { display: none; }
.show-all .btn { gap: 10px; border-radius: 999px; }
.show-all svg { width: 16px; height: 16px; }
.home-more { margin-top: 24px; color: var(--ink-2); }
.home-more a { color: var(--ink); }

/* ---------- Home: feature rows (big title + live demo panel) ---------- */

.features { margin-top: 128px; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px; padding: 28px 0 56px; border-top: 1px solid var(--line); }
.feat-text { display: grid; align-content: start; gap: 16px; padding-top: 4px; }
.feat h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.feat p { color: var(--ink-2); font-size: 1.05rem; max-width: 26em; }
.feat-panel { container-type: inline-size; aspect-ratio: 4 / 3; border-radius: 20px; }
.feat-card { position: absolute; left: 50%; top: 50%; width: 62cqw; transform: translate(-50%, -50%); background: #fff; border-radius: 2.2cqw; box-shadow: 0 2cqw 5cqw -1cqw rgb(22 35 63 / 28%); font-size: 2.3cqw; color: var(--navy); overflow: hidden; }
.fc-head { display: flex; align-items: center; justify-content: space-between; padding: 2.6cqw 3.2cqw; border-bottom: 1px solid #ececec; font-weight: 500; }
.fc-head i { font-style: normal; color: #555; font-size: 2.6cqw; }
.fc-body { padding: 3cqw 3.2cqw; display: grid; gap: 2.4cqw; }
.fc-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1.6cqw; padding: 2.4cqw 3.2cqw; border-top: 1px solid #ececec; }
.fc-btn { padding: 1.2cqw 2.2cqw; border-radius: 1.2cqw; background: var(--navy); color: #fff; font-size: 2.3cqw; }
.fc-ghost { padding: 1.2cqw 2cqw; border-radius: 1.2cqw; background: #f2f2f2; color: #333; font-size: 2.3cqw; }
.fc-row { display: grid; grid-template-columns: 30% 1fr; align-items: center; gap: 2cqw; color: #666; }
.fc-field { padding: 1.3cqw 1.8cqw; border-radius: 1cqw; background: #f3f3f3; color: #000; }
.fc-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: .5cqw; border-radius: 1.2cqw; background: #f3f3f3; position: relative; }
.fc-seg span { position: relative; z-index: 1; text-align: center; padding: 1cqw 0; color: #444; font-size: 2.1cqw; }
.fc-seg::before { content: ""; position: absolute; top: .5cqw; bottom: .5cqw; left: .5cqw; width: calc((100% - 1cqw) / 3); border-radius: .9cqw; background: #fff; box-shadow: 0 .2cqw .6cqw rgb(0 0 0 / 12%); animation: segMove 8s infinite var(--ease); }
@keyframes segMove { 0%, 18% { transform: none; } 26%, 56% { transform: translateX(100%); } 64%, 92% { transform: translateX(200%); } 100% { transform: none; } }

/* Workspace demo: pages get picked one by one, then merged */
.ws-demo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.ws-p { aspect-ratio: 3 / 4; border-radius: .9cqw; background: #f6f6f6; border: 1px solid #e6e6e6; padding: 1.1cqw; position: relative; }
.ws-p::before { content: ""; display: block; height: 1.4cqw; border-radius: .3cqw; background: var(--c); margin-bottom: .9cqw; }
.ws-p::after { content: ""; display: block; height: 7cqw; background: repeating-linear-gradient(#dcdfe4 0 .3cqw, transparent .3cqw .9cqw); }
.ws-p b { position: absolute; left: .9cqw; bottom: .7cqw; font-family: var(--mono); font-weight: 400; font-size: 1.5cqw; color: #666; }
.ws-p:nth-child(1), .ws-p:nth-child(2), .ws-p:nth-child(3) { --c: var(--coral); }
.ws-p:nth-child(4), .ws-p:nth-child(5) { --c: var(--teal); }
.ws-p:nth-child(6), .ws-p:nth-child(7), .ws-p:nth-child(8) { --c: #9b87f5; }
.ws-p:nth-child(2) { animation: wsPick 8s infinite; }
.ws-p:nth-child(5) { animation: wsPick 8s infinite .9s; }
.ws-p:nth-child(7) { animation: wsPick 8s infinite 1.8s; }
@keyframes wsPick { 0%, 10% { box-shadow: none; } 12%, 78% { box-shadow: 0 0 0 .4cqw var(--blue); } 82%, 100% { box-shadow: none; } }
.ws-demo-count { color: #666; font-size: 2.1cqw; margin-right: auto; }
.ws-demo-count b { font-weight: 500; color: #000; }

/* Compress demo: pick "200 KB", press Compress, the file shrinks to fit */
.cz-card .fc-head { height: 8cqw; padding-top: 0; padding-bottom: 0; }
.cz-card .fc-body { gap: 2.4cqw; }
.cz-card .fc-foot { height: 8cqw; padding-top: 0; padding-bottom: 0; }
.cz-file { height: 6cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.6cqw; border-radius: 1.2cqw; background: #f4f6f9; }
.cz-file em { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 1.6cqw; color: #fff; background: #dc3b32; padding: .3cqw .8cqw; border-radius: .6cqw; }
.cz-file span { flex: 1; }
.cz-size { position: relative; display: inline-grid; justify-items: end; font-weight: 600; }
.cz-size b { grid-area: 1 / 1; font-weight: 600; }
.cz-from { animation: czFrom 8s infinite; }
.cz-to { color: #0f7a70; opacity: 0; animation: czTo 8s infinite; }
.cz-label { height: 3cqw; color: #5f6b82; font-size: 2.1cqw; }
.cz-chips { height: 5cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.cz-chips span { display: grid; place-items: center; border-radius: 99cqw; border: 1px solid #dde2ea; font-size: 2cqw; }
.cz-pick { animation: czPick 8s infinite; }
.cz-bar { position: relative; height: 2.4cqw; border-radius: 99cqw; background: #eef1f5; }
.cz-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #0f7a70, #2ec4b6); transform-origin: left; animation: czBar 8s infinite var(--ease); }
.cz-bar::after { content: ""; position: absolute; left: 22%; top: -1cqw; bottom: -1cqw; width: .35cqw; border-radius: 1cqw; background: var(--coral); }
.cz-ok { margin-right: auto; color: #0f7a70; font-weight: 600; font-size: 2.1cqw; opacity: 0; animation: czOk 8s infinite; }
.cz-go { animation: czGo 8s infinite; }
.cz-card .cur { animation: czCur 8s infinite var(--ease); }
@keyframes czCur { 0%, 4% { transform: translate(46cqw, 46cqw); } 14% { transform: translate(23cqw, 26.5cqw) scale(1); } 16% { transform: translate(23cqw, 26.5cqw) scale(.82); } 18% { transform: translate(23cqw, 26.5cqw) scale(1); } 32% { transform: translate(51cqw, 40.8cqw) scale(1); } 34% { transform: translate(51cqw, 40.8cqw) scale(.82); } 36% { transform: translate(51cqw, 40.8cqw) scale(1); } 80% { transform: translate(51cqw, 40.8cqw); } 94%, 100% { transform: translate(46cqw, 46cqw); } }
@keyframes czPick { 0%, 15% { background: #fff; color: inherit; border-color: #dde2ea; } 16%, 92% { background: var(--navy); color: #fff; border-color: var(--navy); } 96%, 100% { background: #fff; color: inherit; border-color: #dde2ea; } }
@keyframes czGo { 0%, 33% { background: var(--navy); } 34%, 36% { background: #0f7a70; } 37%, 100% { background: var(--navy); } }
@keyframes czBar { 0%, 36% { transform: none; } 58%, 92% { transform: scaleX(.2); } 100% { transform: none; } }
@keyframes czFrom { 0%, 54% { opacity: 1; } 58%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes czTo { 0%, 54% { opacity: 0; } 58%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes czOk { 0%, 57% { opacity: 0; } 60%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* Edit demo: click a line of text and change it */
.ed-tools { display: flex; gap: 1.4cqw; align-items: center; padding: 1.8cqw 3.2cqw; border-bottom: 1px solid #ececec; }
.ed-tools span { min-width: 4.2cqw; height: 4.2cqw; display: grid; place-items: center; border-radius: .9cqw; background: #f3f3f3; font-size: 2.2cqw; }
.ed-tools .on { background: var(--navy); color: #fff; }
.ed-tools i { width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--c); }
.ed-page { padding: 3.6cqw 4cqw 4cqw; display: grid; gap: 1.8cqw; }
.ed-page h4 { margin: 0; font-size: 3.4cqw; font-weight: 600; letter-spacing: -.02em; }
.ed-line { height: 1.1cqw; border-radius: 1cqw; background: #e6e8eb; }
.ed-edit { position: relative; font-size: 2.4cqw; padding: .6cqw .8cqw; margin: 0 -.8cqw; border-radius: .6cqw; outline: .3cqw solid var(--blue); display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.ed-txt { display: inline-grid; }
.ed-old, .ed-new { grid-area: 1 / 1; white-space: nowrap; }
.ed-old { animation: edOld 8s infinite steps(16); }
.ed-new { color: var(--blue); clip-path: inset(0 100% 0 0); animation: edNew 8s infinite steps(16); }
.ed-caret { width: .25cqw; height: 3cqw; background: var(--navy); margin-left: .2cqw; animation: blink 1s steps(2) infinite; }
@keyframes edOld { 0%, 30% { clip-path: inset(0 0 0 0); } 42%, 92% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes edNew { 0%, 46% { clip-path: inset(0 100% 0 0); } 66%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes blink { 50% { opacity: 0; } }

/* Sign demo: a signature draws itself */
.sg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: .5cqw; border-radius: 1.2cqw; background: #f3f3f3; text-align: center; }
.sg-tabs span { padding: 1cqw 0; color: #555; font-size: 2.1cqw; }
.sg-tabs .on { background: #fff; border-radius: .9cqw; color: #000; box-shadow: 0 .2cqw .6cqw rgb(0 0 0 / 12%); }
.sg-pad { height: 20cqw; border-radius: 1.4cqw; background: #fafafa; border: .25cqw dashed #d4d4d4; position: relative; }
.sg-pad svg { position: absolute; inset: 1cqw 4cqw 3cqw; width: calc(100% - 8cqw); height: calc(100% - 4cqw); }
.sg-pad path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: sgDraw 8s infinite ease-in-out; }
.sg-pad::after { content: ""; position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; border-bottom: .25cqw solid #cfcfcf; }
@keyframes sgDraw { 0%, 8% { stroke-dashoffset: 600; } 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 600; } }

/* Convert demo: a Word file turns into a PDF */
.cv-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.4cqw; padding: 1cqw 0; }
.cv-file { display: grid; justify-items: center; gap: 1.2cqw; font-size: 2.1cqw; color: #444; }
.cv-file svg { width: 12cqw; height: 12cqw; }
.cv-arrow { width: 6cqw; height: 6cqw; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font-size: 3cqw; animation: cvPulse 4s infinite; }
@keyframes cvPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.cv-pdf { animation: cvIn 4s infinite var(--ease); }
@keyframes cvIn { 0%, 30% { opacity: .25; transform: translateY(1.5cqw); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: .25; } }
.cv-bar { height: 1.6cqw; border-radius: 1cqw; background: #eee; overflow: hidden; }
.cv-bar i { display: block; height: 100%; width: 0; background: var(--blue); animation: cvBar 4s infinite var(--ease); }
@keyframes cvBar { 0% { width: 0; } 45%, 92% { width: 100%; } 100% { width: 100%; } }

/* ---------- Home: statement + big number ---------- */

.statement { margin-top: 128px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: clamp(32px, 6vw, 72px); border-radius: 24px; color: #fff; }
.statement blockquote { margin: 0; }
.statement blockquote p { font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.2; letter-spacing: -0.025em; color: #fff; }
.statement blockquote p span { color: #7fe3d9; }
.statement blockquote footer { margin-top: 22px; font-size: 0.95rem; color: #b9c4d6; }
.big-num { padding: 28px; border-radius: 18px; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 14%); }
.big-num b { display: block; font-weight: 400; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.05em; color: var(--yellow); }
.big-num p { margin-top: 14px; color: #dbe3ef; max-width: 16em; }
.big-num small { display: block; margin-top: 18px; font-size: 0.88rem; color: #b9c4d6; }

/* How it works */
.how { margin-top: 128px; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: how; }
.how-step { counter-increment: how; }
.how-art { aspect-ratio: 220 / 140; display: grid; place-items: center; padding: 18px; margin-bottom: 20px; border-radius: 20px; }
.how-art svg { width: 100%; height: 100%; }
.how-step:nth-child(1) .how-art { background: #ffe9e1; }
.how-step:nth-child(2) .how-art { background: #dcf2ee; }
.how-step:nth-child(3) .how-art { background: #fff3c9; }
.how-step h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 1.25rem; }
.how-step h3::before { content: counter(how); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 0.85rem; font-weight: 600; transform: translateY(-2px); }
.how-step p { color: var(--ink-2); }

/* Old privacy band (kept for translated pages' markup) */
.band { margin-top: 128px; }
.band h2 { max-width: 16em; }
.band-lede { margin-top: 16px; font-size: 1.1rem; color: var(--ink-2); max-width: 34em; }
.reasons { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reasons > div { padding: 24px; border-radius: 12px; background: var(--soft); }
.reasons h3 { margin: 18px 0 6px; }
.reasons p { color: var(--ink-2); font-size: 0.97rem; }
.reason-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #000; color: #fff; }
.reason-icon svg { width: 20px; height: 20px; }

/* FAQ (home, tools, guides) */
.faq-block { margin-top: 128px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 48px; align-items: start; }
.faq-block > div:first-child p { margin-top: 14px; color: var(--ink-2); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 22px 0; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 48px 24px 0; color: var(--ink-2); }

@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero2-top { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .feat { grid-template-columns: 1fr; gap: 24px; }
  .statement { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-steps, .reasons { grid-template-columns: 1fr; }
  .faq-block { grid-template-columns: 1fr; gap: 20px; }
  .how, .band, .faq-block, .features, .statement { margin-top: 88px; }
  .catalog-a { padding-top: 88px; }
  .formats { justify-content: flex-start; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .hero2 { padding-top: 40px; }
  .hero2 h1 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .hero-lede { font-size: 1.05rem; margin-top: 16px; }
  .home-search input { height: 54px; font-size: 1rem; padding-left: 48px; }
  .home-search .search-icon { left: 18px; }
  /* The demo is wide: on phones we show its middle (the phone screen). */
  .showcase { margin: 32px -18px 0; overflow: hidden; border-radius: 0; }
  .sc-stage { width: 190%; margin-left: -38%; }
  .formats li { font-size: 1.1rem; }
  .formats ul { gap: 8px 22px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 20px; margin-right: -18px; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; font-size: 1.05rem; }
  .card-grid { grid-template-columns: 1fr; gap: 8px; }
  .tool-card { grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; min-height: 0; padding: 16px; }
  .tool-card .tool-icon { grid-row: span 2; margin: 0; }
  .tool-go { display: none; }
  .feat-panel { margin: 0 -18px; }
  .statement blockquote, .big-num { padding-left: 16px; }
  .faq details p { padding-right: 0; }
}

/* ---------- Tool page ---------- */

.tool-hero { padding: 40px 0 36px; display: grid; justify-items: start; max-width: 900px; }
.crumbs { font-size: 0.88rem; color: var(--ink-3); margin-bottom: 30px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { margin: 0 8px; opacity: .6; }
.tool-hero h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tool-hero h1 .tool-icon { width: 48px; height: 48px; border-radius: 12px; }
.tool-hero .lede { margin-top: 12px; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink-2); max-width: 34em; }

/* The upload area sits on a colourful panel, like a canvas */
.tool { max-width: none; }
.tool-stage { padding: clamp(18px, 4.5vw, 64px); border-radius: 20px; }
.tool-stage > * { position: relative; z-index: 1; }
.sc-stage { z-index: 1; }
.sheet { position: relative; background: #fff; border-radius: var(--radius-sheet); box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 18px 48px -18px rgb(0 0 0 / 28%); }
.drop { padding: 12px; max-width: 880px; margin: 0 auto; }
.drop-inner { display: grid; justify-items: center; text-align: center; padding: 52px 24px 44px; border: 1.5px dashed #cfcfcf; border-radius: 10px; transition: border-color .2s, background-color .2s; }
.drop.is-over .drop-inner { border-color: var(--primary); background: var(--primary-tint); }
.drop-icon { display: block; width: 64px; height: 64px; margin-bottom: 18px; transition: transform .3s var(--ease); }
.drop.is-over .drop-icon { transform: translateY(-6px); }
.drop-icon svg { width: 100%; height: 100%; }
.drop-title { font-size: 1.45rem; letter-spacing: -0.02em; }
.drop .btn { margin-top: 22px; min-width: 240px; }
.drop-note { margin-top: 12px; color: var(--ink-2); font-size: 0.93rem; }
.drop-limits { margin-top: 18px; font-size: 0.84rem; color: var(--ink-3); }
.drop.compact { padding: 8px; }
.drop.compact .drop-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 12px 12px 12px 16px; text-align: left; border: 0; background: var(--ok-bg); }
.drop.compact .drop-icon, .drop.compact .drop-title, .drop.compact .drop-limits { display: none; }
.drop.compact .btn { margin-top: 0; min-width: 0; order: 2; min-height: 44px; font-size: 0.95rem; padding: 0 18px; }
.drop.compact .drop-note { margin-top: 0; color: #145c3a; display: flex; align-items: center; gap: 10px; }
.drop.compact .drop-note::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.drop.compact.is-over .drop-inner { background: var(--primary-tint); }

.safe-note { display: flex; justify-content: center; gap: 8px; align-items: center; margin-top: 18px; font-size: 0.9rem; color: var(--ink); text-align: center; }
.safe-note svg { width: 16px; height: 16px; flex: none; }
.safe-note a { color: var(--ink); }

/* Working area, progress, errors and results */
.work { margin-top: 18px; }
.work:empty { display: none; }
.panel { padding: 24px; }
.panel + .panel { margin-top: 16px; }
.panel-title { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 20px; }

.status { margin-top: 16px; padding: 16px 18px 16px 52px; position: relative; border-radius: 12px; font-size: 0.97rem; }
.status[hidden] { display: none; }
.status.is-info { background: #fff; box-shadow: var(--shadow-md); }
.status.is-info::before { content: ""; position: absolute; left: 18px; top: 17px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--primary-soft); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.status.is-error { background: var(--alert-bg); color: var(--alert); border: 1px solid #f7d4cf; }
.status.is-error::before { content: ""; position: absolute; left: 17px; top: 15px; width: 22px; height: 22px; border-radius: 50%; background: var(--alert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center / 14px no-repeat; }
.progress { height: 6px; background: #ececec; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .25s var(--ease); }

.result { padding: 44px 32px 28px; margin-top: 18px; text-align: center; animation: rise .35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.result::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 28px no-repeat; box-shadow: 0 0 0 8px var(--ok-bg); }
.result h2 { font-size: 2rem; }
.result > p { margin: 10px auto 0; color: var(--ink-2); max-width: 36em; }
.result .actions { justify-content: center; margin-top: 26px; }
.result .result-note { margin: 18px auto 0; max-width: 40em; padding: 12px 16px; border-radius: 10px; background: var(--soft); color: var(--ink-2); font-size: 0.92rem; text-align: left; }
.result-note .link-btn { color: var(--ink); }
.result-again { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; margin-top: 24px; text-align: left; }
.result-grid a { display: grid; gap: 6px; font-size: 0.85rem; text-decoration: none; color: var(--ink-2); }
.result-grid img { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.result-grid-wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.result textarea { text-align: left; }

/* Content under the tool */
.content { margin-top: 112px; display: grid; gap: 112px; }
.content > section > h2 { margin-bottom: 28px; }
.how-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.how-tool h2 { margin-bottom: 32px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); font-weight: 600; font-size: 0.95rem; }
.steps h3 { margin: 0 0 6px; font-size: 1.2rem; }
.steps p { color: var(--ink-2); }
.tool-picture-wrap { border-radius: 20px; padding: clamp(24px, 5vw, 56px); }
.tool-picture-wrap .tool-picture { position: relative; z-index: 1; width: 100%; height: auto; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 16px 40px -18px rgb(0 0 0 / 30%); }
.content .faq-block { margin-top: 0; }

.prose { max-width: 44em; }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: 16px; }
.prose a { color: var(--ink); }
.prose h2 { margin-top: 44px; margin-bottom: 14px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prose h3 { margin-top: 28px; margin-bottom: 8px; }
.prose ul, .prose ol { margin: 14px 0 0 1.2em; padding: 0; color: var(--ink-2); }
.prose li + li { margin-top: 8px; }
.prose.wide { max-width: none; }
.about-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 48px; }
.about-tool .prose { max-width: none; font-size: 1.08rem; }

.related-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.related-grid a { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--soft); text-decoration: none; color: var(--ink); transition: background-color .2s; }
.related-grid a:hover { background: var(--soft-2); }
.related-grid .tool-icon-sm { width: 32px; height: 32px; border-radius: 8px; }
.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: var(--soft); border-radius: 10px; text-decoration: none; color: var(--ink); }

.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 32px; border-top: 1px solid var(--line); }
.guide-cards li { border-bottom: 1px solid var(--line); }
.guide-cards a { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 100%; padding: 18px 0; text-decoration: none; color: var(--ink); line-height: 1.4; }
.guide-cards a:hover span { text-decoration: underline; }
.guide-cards svg { width: 18px; height: 18px; flex: none; }

.table-scroll { overflow-x: auto; margin: 20px 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.cmp-table, .lic-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.cmp-table { min-width: 560px; }
.lic-table { min-width: 760px; font-size: 0.86rem; }
.cmp-table th, .cmp-table td, .lic-table th, .lic-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.cmp-table thead th, .lic-table th { background: var(--soft); font-weight: 500; }
.cmp-table tbody th { font-weight: 500; width: 26%; }
.lic-text { white-space: pre-wrap; font-size: 0.8rem; line-height: 1.5; background: var(--soft); border-radius: 10px; padding: 14px; max-height: 320px; overflow: auto; }

@media (max-width: 860px) {
  .how-tool, .about-tool { grid-template-columns: 1fr; gap: 28px; }
  .content { margin-top: 80px; gap: 80px; }
}
@media (max-width: 600px) {
  .tool-hero { padding: 24px 0 24px; }
  .crumbs { margin-bottom: 20px; }
  .tool-hero h1 .tool-icon { width: 40px; height: 40px; }
  .tool-stage { margin: 0 -18px; padding: 18px 12px; }
  .drop { padding: 8px; }
  .drop-inner { padding: 34px 16px 30px; }
  .drop .btn { width: 100%; min-width: 0; }
  .drop-note { display: none; }
  .drop.compact .drop-note { display: flex; }
  .drop.compact .btn { width: auto; }
  .panel { padding: 18px; }
  .result { padding: 32px 18px 22px; }
  .result .actions .btn { width: 100%; }
  .btn-big { width: 100%; }
}
@media (pointer: coarse) {
  .btn-small { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; min-height: 44px; }
  .link-btn { padding: 10px 0; }
}

/* ---------- Plain pages and guides ---------- */

.page-doc { padding-top: 56px; max-width: 900px; }
.page-doc > h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.page-doc .prose { margin-top: 24px; font-size: 1.05rem; }
.page-doc h3 { margin-top: 24px; margin-bottom: 8px; }
.page-doc ul { color: var(--ink-2); }
.page-doc.licences { max-width: var(--wrap); }
.guide .crumbs { margin-bottom: 24px; }
.guide .lede { margin-top: 18px; font-size: 1.3rem; color: var(--ink-2); letter-spacing: -0.015em; }
.guide-dates { margin-top: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.guide .prose { max-width: none; }
.guide .prose code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.guide .faq { margin-top: 12px; }
.guide-section { margin-top: 56px; }
.guide-section h2 { margin-bottom: 20px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.answer-box { margin: 24px 0 8px; padding: 18px 22px; border-left: 3px solid var(--primary); background: var(--soft); border-radius: 0 10px 10px 0; }
.answer-box p { margin: 0; color: var(--ink); }
.guide-fig { margin: 24px 0 28px; }
.guide-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.guide-fig figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--ink-3); }
.field-help { font-size: 0.86rem; color: var(--ink-3); }
.editorial-note { margin-top: 44px; padding: 16px 18px; border-radius: 10px; background: var(--soft); }
.guide-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.guide-list li { border-bottom: 1px solid var(--line); }
.guide-list a { display: grid; gap: 6px; padding: 24px 0; text-decoration: none; color: var(--ink); }
.guide-list a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.guide-list strong { font-weight: 400; font-size: 1.4rem; letter-spacing: -0.02em; }
.guide-list span { color: var(--ink-2); font-size: 0.97rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .status.is-info::before { animation: spin 1.6s linear infinite !important; }
  /* Demos show a calm, finished state. */
  .ed-new { clip-path: none; } .ed-old { visibility: hidden; } .sg-pad path { stroke-dashoffset: 0; } .cv-pdf { opacity: 1; }
}

/* Once a file is chosen, the work area needs the whole width: the
   colourful panel steps back. */
.tool-stage:has(.drop.compact), .tool-stage:has(.drop.hidden), .tool-stage:has(#result:not([hidden])) { background: none; padding: 0; overflow: visible; margin-left: 0; margin-right: 0; }
.tool-stage:has(.drop.compact) .sheet, .tool-stage:has(.drop.hidden) .sheet { box-shadow: 0 0 0 1px var(--line); }
.tool-stage:has(.drop.compact) .drop { max-width: none; }

/* Hindi and Chinese: the display font has no Devanagari or Chinese letters,
   and tight letter-spacing breaks joined Devanagari letters. */
:is(:lang(hi), :lang(zh)) :is(h1, h2, h3, .tool-name, .drop-title, .brand-word) { letter-spacing: 0; }
:lang(hi) :is(h1, h2, h3) { line-height: 1.3; }
:lang(hi) .home-hero h1 { line-height: 1.2; }

/* "Rename" next to a download button: the file's name before it's saved. */
.rename { display: inline-flex; align-items: center; }
.rename-edit { display: inline-flex; align-items: center; gap: 4px; }
.rename-input { width: 16ch; max-width: 46vw; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: 0.95rem; background: #fff; color: var(--ink); }
.rename-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgb(15 118 110 / 14%); }
.rename-ext { color: var(--ink-2); font-size: 0.92rem; }

/* ---------- Arabic (/ar/): font and right-to-left layout ---------- */
/* Arabic text renders in Noto Sans Arabic (see fontFaceCss in vendor.mjs);
   Latin letters and digits inside it keep DM Sans / Manrope via unicode-range. */
html[lang="ar"] {
  --font: "DM Sans", "DM Sans fallback", "DM Sans fallback 2", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", "Manrope fallback", "Manrope fallback 2", "Noto Sans Arabic", "DM Sans", system-ui, sans-serif;
}
/* Negative letter-spacing breaks joined Arabic letters. */
[dir="rtl"] :is(h1, h2, h3, .brand, .tool-name, .drop-title, .eyebrow) { letter-spacing: 0; }
[dir="rtl"] :is(h1, h2, h3) { line-height: 1.3; }
/* Mirror the physical left/right rules. */
[dir="rtl"] .skip { left: auto; right: -999px; }
[dir="rtl"] .skip:focus { left: auto; right: 12px; }
[dir="rtl"] .brand-mark { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .site-nav { margin-left: 0; margin-right: 20px; }
[dir="rtl"] .head-tools { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mega { left: auto; right: -12px; }
[dir="rtl"] .lang-list, [dir="rtl"] .search-pop { right: auto; left: 0; }
[dir="rtl"] .lang-list .tick { margin-left: 0; margin-right: auto; }
[dir="rtl"] .search-icon { left: auto; right: 16px; }
[dir="rtl"] .home-search .search-icon { left: auto; right: 22px; }
[dir="rtl"] .home-search input { padding: 0 54px 0 22px; }
[dir="rtl"] .search-box .search-icon { left: auto; right: 12px; }
[dir="rtl"] .search-box input { padding: 0 38px 0 34px; }
[dir="rtl"] .search-key { right: auto; left: 10px; }
[dir="rtl"] .text-link svg, [dir="rtl"] .tool-go svg, [dir="rtl"] .guide-cards svg { transform: scaleX(-1); }
[dir="rtl"] .tool-go { right: auto; left: 20px; }
[dir="rtl"] .status { padding: 16px 52px 16px 18px; }
[dir="rtl"] .status.is-info::before { left: auto; right: 18px; }
[dir="rtl"] .status.is-error::before { left: auto; right: 17px; }
[dir="rtl"] .drop.compact .drop-inner { text-align: right; padding: 12px 16px 12px 12px; }
[dir="rtl"] .ft-chip { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .btn .ft-chip { margin-left: 2px; }
[dir="rtl"] .result .result-note, [dir="rtl"] .result-grid { text-align: right; }
[dir="rtl"] .faq details p { padding: 0 0 22px 48px; }
[dir="rtl"] :is(.lic-table, .cmp-table) :is(th, td) { text-align: right; }
[dir="rtl"] .answer-box { border-left: none; border-right: 3px solid #000; border-radius: 10px 0 0 10px; }
[dir="rtl"] .prose :is(ul, ol) { margin: 14px 1.2em 0 0; }
@media (max-width: 560px) {
  [dir="rtl"] .home-search .search-icon { left: auto; right: 18px; }
  [dir="rtl"] .home-search input { padding: 0 48px 0 16px; }
  [dir="rtl"] .faq details p { padding-left: 0; }
}
@media (max-width: 960px) {
  [dir="rtl"] .site-search.is-open .search-box .search-icon { left: auto; right: 29px; }
}

/* File-type colours (generated from FILE_TYPES in content.mjs) */
.hue-pdf { --hue: #dc3b32; --hue-soft: #fdeceb; }
.ft-chip.ft-pdf { background: #c8322a; }
.hue-word { --hue: #2b64d0; --hue-soft: #e8effc; }
.ft-chip.ft-word { background: #2b64d0; }
.hue-excel { --hue: #1d8a4e; --hue-soft: #e4f4ea; }
.ft-chip.ft-excel { background: #1a7f47; }
.hue-ppt { --hue: #d8642a; --hue-soft: #fcede4; }
.ft-chip.ft-ppt { background: #b9541f; }
.hue-image { --hue: #9a46c9; --hue-soft: #f4eafb; }
.ft-chip.ft-image { background: #9a46c9; }
.hue-text { --hue: #57667c; --hue-soft: #edf0f4; }
.ft-chip.ft-text { background: #57667c; }
.hue-csv { --hue: #118c7e; --hue-soft: #e2f4f1; }
.ft-chip.ft-csv { background: #0f7d70; }
.hue-zip { --hue: #d4930a; --hue-soft: #fcf3dc; }
.ft-chip.ft-zip { background: #946505; }