<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>tomake.design (tofig.design) - Figma Design Tools &amp; Plugins</title>

  <!-- SEO Meta Tags -->
  <meta name="description" content="Install free Figma plugins to import websites, HTML/CSS, PDFs, Photoshop (.psd), Illustrator (.ai) and EPS files as editable Figma designs. Formerly tofig.design, now tomake.design." />
  <meta name="keywords" content="Figma plugin, HTML to Figma, PDF to Figma, PSD to Figma, Photoshop to Figma, Illustrator to Figma, AI file to Figma, EPS to Figma, website to Figma, convert HTML to Figma, import PDF Figma, tomake.design, tofig.design, html.tomake.design, pdf.tomake.design, psd.tomake.design, illustrator.tomake.design, eps.tomake.design, Figma design tools, free Figma plugins, @tomakedesign, Figma Community" />
  <meta name="author" content="tomakedesign LLC" />
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
  <meta name="googlebot" content="index, follow" />
  <meta name="bingbot" content="index, follow" />
  <link rel="canonical" href="https://tomake.design/feed.xml" />
  <link rel="alternate" hreflang="en" href="https://tomake.design/feed.xml" />
  <link rel="alternate" hreflang="x-default" href="https://tomake.design/feed.xml" />
  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
  <link rel="alternate" type="application/rss+xml" title="tomake.design RSS Feed" href="/feed.xml" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://tomake.design/feed.xml" />
  <meta property="og:title" content="tomake.design (tofig.design) - Figma Design Tools &amp; Plugins" />
  <meta property="og:description" content="Install free Figma plugins to import websites, HTML/CSS, PDFs, Photoshop (.psd), Illustrator (.ai) and EPS files as editable Figma designs. Formerly tofig.design, now tomake.design." />
  <meta property="og:image" content="https://tomake.design/brand/og-image.png" />
  <meta property="og:image:alt" content="tomake.design - Free Figma Plugins" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="675" />
  <meta property="og:site_name" content="tomake.design" />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:url" content="https://tomake.design/feed.xml" />
  <meta name="twitter:title" content="tomake.design (tofig.design) - Figma Design Tools &amp; Plugins" />
  <meta name="twitter:description" content="Install free Figma plugins to import websites, HTML/CSS, PDFs, Photoshop (.psd), Illustrator (.ai) and EPS files as editable Figma designs. Formerly tofig.design, now tomake.design." />
  <meta name="twitter:image" content="https://tomake.design/brand/og-image.png" />
  <meta name="twitter:image:alt" content="tomake.design - Free Figma Plugins" />
  <meta name="twitter:site" content="@tomakedesign" />
  <meta name="twitter:creator" content="@tomakedesign" />

  <!-- Additional SEO & PWA -->
  <meta name="application-name" content="tomake.design" />
  <meta name="apple-mobile-web-app-title" content="tomake.design" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="theme-color" content="#0a0a0a" />
  <meta name="msapplication-TileColor" content="#0a0a0a" />
  <meta name="color-scheme" content="light dark" />

  <!-- Inter Font -->
  <link rel="preconnect" href="https://rsms.me">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

  <!-- Vendor utilities (kept for legacy markup compatibility) -->
  <link rel="stylesheet" href="/css/vendor/tachyons.min.css">

  <!-- Icons -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

  <!-- CSS: design system (tokens → components) -->
  <style>/*
 * tokens.css
 * Design system tokens — procreate-inspired
 * Loaded after index.css so values override the legacy palette
 */

:root {
  /* ────────────────────────────────
   * Surfaces — deep neutrals
   * ──────────────────────────────── */
  --bg:           #0a0a0a;
  --surface:      #121212;
  --surface-2:    #1a1a1a;
  --surface-3:    #242424;
  --surface-hi:   #2e2e2e;
  --bg-light:     #f3f0ea;
  --bg-light-2:   #ebe7df;
  --surface-light: #ffffff;

  /* ────────────────────────────────
   * Text
   * ──────────────────────────────── */
  --text:         #f2f0ec;
  --text-muted:   #a5a39d;
  --text-subtle:  #6b6963;
  --text-faint:   #444240;
  --text-dark:    #0a0a0a;
  --text-dark-muted: #4a4744;
  --text-dark-subtle: #75716b;

  /* ────────────────────────────────
   * Borders
   * ──────────────────────────────── */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-light:  rgba(10, 10, 10, 0.08);
  --border-light-strong: rgba(10, 10, 10, 0.16);

  /* ────────────────────────────────
   * Accents — warm + restrained
   * ──────────────────────────────── */
  --accent:        #ff5a1f;      /* terracotta — primary brand */
  --accent-hover:  #ff7a44;
  --accent-soft:   #ffe1d0;
  --accent-deep:   #c44518;

  /* Plugin-specific accents (used sparingly) */
  --html-accent:   #ff5a1f;      /* terracotta */
  --pdf-accent:    #25c2a0;      /* deep teal */
  --ai-accent:     #a78bfa;      /* violet */
  --psd-accent:    #31a8ff;      /* photoshop blue */
  --illustrator-accent: #ff9a00; /* illustrator amber */
  --eps-accent:    #a78bfa;      /* violet */

  /* ────────────────────────────────
   * Typography
   * ──────────────────────────────── */
  --font-sans:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale — editorial */
  --t-hero:     clamp(36px, 5.5vw, 72px);
  --t-display:  clamp(32px, 4.5vw, 60px);
  --t-headline: clamp(28px, 4vw, 48px);
  --t-subhead:  clamp(22px, 2.6vw, 32px);
  --t-title:    clamp(18px, 1.6vw, 22px);
  --t-eyebrow:  13px;
  --t-body-xl:  18px;
  --t-body-lg:  17px;
  --t-body:     16px;
  --t-small:    14px;
  --t-micro:    12px;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-heavy:   800;
  --w-black:   900;

  /* Letter spacing */
  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.025em;
  --tracking-normal:   -0.011em;
  --tracking-wide:     0.02em;
  --tracking-eyebrow:  0.16em;

  /* ────────────────────────────────
   * Spacing scale (8px base)
   * ──────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  /* Section vertical padding (fluid) */
  --section-y:    clamp(72px, 10vw, 160px);
  --section-y-lg: clamp(96px, 14vw, 220px);

  /* ────────────────────────────────
   * Layout
   * ──────────────────────────────── */
  --max-w:        1440px;
  --max-w-narrow: 880px;
  --max-w-prose:  640px;
  --container-x:  clamp(24px, 5vw, 80px);

  /* ────────────────────────────────
   * Radii
   * ──────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ────────────────────────────────
   * Shadows / glow
   * ──────────────────────────────── */
  --shadow-glow:  0 0 120px rgba(255, 90, 31, 0.18);
  --shadow-card:  0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-lift:  0 30px 60px -20px rgba(0,0,0,0.5);

  /* ────────────────────────────────
   * Motion
   * ──────────────────────────────── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 1, 1);
  --t-fast:    150ms;
  --t-base:    300ms;
  --t-slow:    600ms;
  --t-slower:  1000ms;

  /* ────────────────────────────────
   * Legacy variable overrides
   * The existing inline styles in .njk files reference these names —
   * remapping them keeps the legacy markup visually aligned with the
   * new system without a wholesale rewrite (until each page is reskinned).
   * ──────────────────────────────── */
  --ink:        var(--bg);
  --ink-light:  var(--surface-2);
  --white:      #ffffff;
  --cream:      var(--bg-light);
  --off-white:  var(--bg-light-2);

  --gray-100:   #ededeb;
  --gray-200:   #d9d6d0;
  --gray-400:   var(--text-dark-subtle);
  --gray-600:   var(--text-dark-muted);
  --gray-800:   #1f1d1b;

  --orange:     var(--accent);
  --coral:      #e8654a;
  --magenta:    #c44a8a;
  --pink:       #d97a9f;
  --red:        #d94a4a;
  --yellow:     #e8b62e;
  --lime:       #b8c93a;
  --green:      #2da57f;
  --teal:       var(--pdf-accent);
  --cyan:       #4aa8c4;
  --sky:        #6fb3d4;
  --blue:       #4a6fcf;
  --navy:       #1d3557;
  --purple:     var(--ai-accent);
}

@supports (font-variation-settings: normal) {
  :root {
    --font-sans:    "Inter var", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }
}

/* ────────────────────────────────
 * Global base — restyle body for the new look
 * ──────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: var(--tracking-normal);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "ss01" 1, "cv11" 1, "calt" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent); }
img, svg { max-width: 100%; display: block; }
</style>
  <style>/*
 * components.css
 * Reusable UI components for the procreate-inspired system.
 * Pair with tokens.css.
 */

/* ──────────────────────────────────────────
 * Layout primitives
 * ────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--container-x);
}
.wrap--narrow { max-width: var(--max-w-narrow); }
.wrap--prose  { max-width: var(--max-w-prose); }

/* Section — full bleed band with vertical rhythm */
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--text);
}
.section--lg    { padding-block: var(--section-y-lg); }
.section--light { background: var(--bg-light); color: var(--text-dark); }
.section--cream { background: var(--bg-light-2); color: var(--text-dark); }
.section--surface { background: var(--surface); }

/* Hairline divider */
.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}
.section--light .rule,
.section--cream .rule { background: var(--border-light); }

/* ──────────────────────────────────────────
 * Eyebrow — small uppercase label
 * ────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s-5);
}
.section--light .eyebrow,
.section--cream .eyebrow { color: var(--text-dark-muted); }

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.eyebrow--accent { color: var(--accent); }
.eyebrow--accent::before { background: var(--accent); opacity: 1; }

/* ──────────────────────────────────────────
 * Typography
 * ────────────────────────────────────────── */
.t-hero,
.t-display,
.t-headline,
.t-subhead,
.t-title {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
}

.t-hero {
  font-size: var(--t-hero);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
.t-display {
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.t-headline {
  font-size: var(--t-headline);
  font-weight: var(--w-semi);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.t-subhead {
  font-size: var(--t-subhead);
  font-weight: var(--w-semi);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}
.t-title {
  font-size: var(--t-title);
  font-weight: var(--w-semi);
  line-height: 1.3;
  letter-spacing: var(--tracking-normal);
}
.t-lead {
  font-size: var(--t-body-xl);
  font-weight: var(--w-regular);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.section--light .t-lead,
.section--cream .t-lead { color: var(--text-dark-muted); }

.t-body { font-size: var(--t-body); line-height: 1.6; margin: 0; color: var(--text-muted); }
.section--light .t-body,
.section--cream .t-body { color: var(--text-dark-muted); }

.t-muted { color: var(--text-muted); }
.section--light .t-muted,
.section--cream .t-muted { color: var(--text-dark-muted); }
.t-accent { color: var(--accent); }
.t-white  { color: #ffffff; }
.t-dark   { color: var(--text-dark); }

/* ──────────────────────────────────────────
 * Buttons
 * ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--w-semi);
  letter-spacing: -0.005em;
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: #ffffff;
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: #ffffff;
}

.btn--light {
  background: #ffffff;
  color: var(--text-dark);
}
.btn--light:hover { background: var(--bg-light-2); color: var(--text-dark); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--text-muted);
}

.section--light .btn--ghost,
.section--cream .btn--ghost {
  color: var(--text-dark);
  border-color: var(--border-light-strong);
}
.section--light .btn--ghost:hover,
.section--cream .btn--ghost:hover {
  background: rgba(0,0,0,0.04);
  border-color: var(--text-dark);
}

.btn--dark {
  background: var(--bg);
  color: #ffffff;
}
.btn--dark:hover { background: var(--surface-2); color: #ffffff; }

.btn--lg {
  height: 56px;
  padding-inline: 32px;
  font-size: 16px;
}

.btn--xl {
  height: 64px;
  padding-inline: 40px;
  font-size: 17px;
}

.btn .arrow {
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(2px); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: var(--w-semi);
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.link-arrow:hover { color: var(--accent-hover); }
.link-arrow::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ──────────────────────────────────────────
 * Nav
 * ────────────────────────────────────────── */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 0;
}
/* When the page doesn't lead with a photo hero, give the nav a glass backdrop */
body:not(:has(.hero--photo, .hero--mat)) .nav {
  position: sticky;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--w-bold);
  font-size: 17px;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.nav__brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent);
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: var(--w-heavy);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav__link {
  font-size: 15px;
  font-weight: var(--w-medium);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__link:hover { color: #ffffff; }
.nav__cta { margin-left: var(--s-4); }
.nav__chev {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
  transition: transform var(--t-fast) var(--ease);
}

/* Dropdown menu */
.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev {
  transform: translateY(0) rotate(225deg);
}

.nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  padding: 10px;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility 0s linear var(--t-base);
  z-index: 60;
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility 0s;
}

.nav__menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: background var(--t-fast) var(--ease);
}
.nav__menu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

.nav__menu-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.nav__menu-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.nav__menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__menu-title {
  font-size: 15px;
  font-weight: var(--w-semi);
  letter-spacing: -0.005em;
  color: #ffffff;
}
.nav__menu-sub {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: -0.005em;
}

@media (max-width: 720px) {
  .nav__menu { display: none; }
}

@media (max-width: 720px) {
  .nav__links .nav__link { display: none; }
}

/* ──────────────────────────────────────────
 * Hero
 * ────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(96px, 14vw, 200px) clamp(80px, 12vw, 160px);
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto auto;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at top right, rgba(255,90,31,0.18), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__title { margin-bottom: var(--s-7); }
.hero__lead  { margin-bottom: var(--s-8); }
.hero__ctas  { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.hero--light {
  background: var(--bg-light);
  color: var(--text-dark);
}
.hero--light::before {
  background: radial-gradient(ellipse at top right, rgba(255,90,31,0.12), transparent 60%);
}

/* Plugin-themed hero accents */
.hero--html::before { background: radial-gradient(ellipse at top right, rgba(255,90,31,0.22), transparent 60%); }
.hero--pdf::before  { background: radial-gradient(ellipse at top right, rgba(37,194,160,0.22), transparent 60%); }
.hero--ai::before   { background: radial-gradient(ellipse at top right, rgba(167,139,250,0.22), transparent 60%); }
.hero--psd::before  { background: radial-gradient(ellipse at top right, rgba(49,168,255,0.22), transparent 60%); }
.hero--illustrator::before { background: radial-gradient(ellipse at top right, rgba(255,154,0,0.22), transparent 60%); }
.hero--eps::before  { background: radial-gradient(ellipse at top right, rgba(167,139,250,0.22), transparent 60%); }

/* Photo hero — full-bleed lifestyle background, content anchored near bottom */
.hero--photo {
  min-height: 76svh;
  padding-block: clamp(96px, 14vh, 160px) clamp(40px, 5vh, 64px);
  background: var(--bg);
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  text-align: center;
}
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.hero--photo::before {
  /* darken the photo for legibility — softer fade so the photo reads more naturally */
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.7) 100%);
  z-index: -1;
  pointer-events: none;
}
.hero--photo .hero__inner,
.hero--mat .hero__inner { text-align: center; }
.hero--photo .eyebrow,
.hero--mat .eyebrow { color: rgba(255,255,255,0.8); justify-content: center; }
.hero--photo .eyebrow::before,
.hero--mat .eyebrow::before { background: rgba(255,255,255,0.5); }
.hero--photo .hero__title,
.hero--mat .hero__title { color: #ffffff; }
.hero--photo .t-lead,
.hero--mat .t-lead { color: rgba(255,255,255,0.85); }

/* Cutting-mat hero — a self-healing mat drawn entirely in CSS. No image weight.
 * Three passes build it: the section paints the surface (key light + a
 * three-weight grid), ::before adds blade wear and the legibility scrim, and
 * ::after lays turbulence grain over everything so the surface reads matte
 * rather than vector-flat. */
.hero--mat {
  /* Surface — lit at the top-left, falling off to a shadowed bottom-right */
  --mat-deep: #122a21;
  --mat-base: #1c4133;
  --mat-lift: #2b6350;

  /* Printed rules — the weight hierarchy is what sells it as a real mat */
  --mat-major: rgba(216, 240, 228, 0.20);   /* 1in   */
  --mat-minor: rgba(216, 240, 228, 0.085);  /* 1/2in */
  --mat-fine:  rgba(216, 240, 228, 0.038);  /* 1/8in */
  --mat-guide: rgba(173, 255, 214, 0.075);  /* 45/135 angle guides */

  --mat-cell: 96px;
  --mat-half: 48px;
  --mat-fine-pitch: 12px;

  min-height: 76svh;
  padding-block: clamp(96px, 14vh, 160px) clamp(40px, 5vh, 64px);
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  text-align: center;

  background-color: var(--mat-base);
  background-image:
    /* angle guides — one pair every four cells, as printed on a mat */
    repeating-linear-gradient(45deg,  var(--mat-guide) 0 1px, transparent 1px calc(var(--mat-cell) * 4)),
    repeating-linear-gradient(-45deg, var(--mat-guide) 0 1px, transparent 1px calc(var(--mat-cell) * 4)),
    /* 1in */
    repeating-linear-gradient(to right,  var(--mat-major) 0 1px, transparent 1px var(--mat-cell)),
    repeating-linear-gradient(to bottom, var(--mat-major) 0 1px, transparent 1px var(--mat-cell)),
    /* 1/2in */
    repeating-linear-gradient(to right,  var(--mat-minor) 0 1px, transparent 1px var(--mat-half)),
    repeating-linear-gradient(to bottom, var(--mat-minor) 0 1px, transparent 1px var(--mat-half)),
    /* 1/8in */
    repeating-linear-gradient(to right,  var(--mat-fine) 0 1px, transparent 1px var(--mat-fine-pitch)),
    repeating-linear-gradient(to bottom, var(--mat-fine) 0 1px, transparent 1px var(--mat-fine-pitch)),
    /* key light top-left, shadow pooling bottom-right, then the body tone */
    radial-gradient(ellipse 110% 85% at 16% -8%, rgba(126, 226, 182, 0.17), transparent 56%),
    radial-gradient(ellipse 95% 75% at 90% 108%, rgba(4, 14, 10, 0.55), transparent 62%),
    linear-gradient(168deg, var(--mat-lift) 0%, var(--mat-base) 46%, var(--mat-deep) 100%);
}
/* Blade wear + legibility scrim. The cuts are deliberately irregular so they
 * read as use rather than as a repeating pattern. */
.hero--mat::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 720' preserveAspectRatio='none'%3E%3Cg stroke='white' stroke-opacity='0.085' stroke-width='1.3' stroke-linecap='round'%3E%3Cline x1='180' y1='120' x2='362' y2='131'/%3E%3Cline x1='410' y1='96' x2='505' y2='210'/%3E%3Cline x1='820' y1='150' x2='1010' y2='142'/%3E%3Cline x1='1120' y1='220' x2='1210' y2='318'/%3E%3Cline x1='260' y1='430' x2='430' y2='455'/%3E%3Cline x1='640' y1='520' x2='905' y2='512'/%3E%3Cline x1='120' y1='300' x2='300' y2='296'/%3E%3Cline x1='700' y1='260' x2='760' y2='330'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='0.05' stroke-width='1' stroke-linecap='round'%3E%3Cline x1='980' y1='380' x2='1120' y2='370'/%3E%3Cline x1='1250' y1='470' x2='1390' y2='520'/%3E%3Cline x1='520' y1='640' x2='700' y2='648'/%3E%3Cline x1='1040' y1='600' x2='1190' y2='592'/%3E%3Cline x1='330' y1='190' x2='470' y2='183'/%3E%3Cline x1='860' y1='660' x2='1060' y2='668'/%3E%3C/g%3E%3C/svg%3E"),
    /* a shallow pool behind the type, then a fade into the section below */
    radial-gradient(ellipse 76% 56% at 50% 52%, rgba(6, 16, 12, 0.30), transparent 74%),
    linear-gradient(180deg, rgba(6, 16, 12, 0.40) 0%, rgba(6, 16, 12, 0.10) 38%, rgba(6, 16, 12, 0.78) 100%);
}
/* Matte grain — overlay keeps it a texture on the green instead of a grey haze */
.hero--mat::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  /* 5fps stepped jitter — film grain, not a smooth slide */
  animation: mat-grain 1.2s steps(1, end) infinite;
}
/* Tighter pitch on small viewports so the grid doesn't crowd the type */
@media (max-width: 640px) {
  .hero--mat {
    --mat-cell: 64px;
    --mat-half: 32px;
    --mat-fine-pitch: 8px;
  }
}

/* Mat hero motion — a drifting key light, grain flicker, and a staggered
 * entrance. Every animation here is decorative, so the whole set is switched
 * off under prefers-reduced-motion below. */
@keyframes mat-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
}
@keyframes mat-sheen {
  from { transform: translate3d(-12%, -6%, 0) scale(1); }
  to   { transform: translate3d(14%, 8%, 0) scale(1.12); }
}
@keyframes mat-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
}

/* Soft highlight that wanders the surface, as if the light in the room moves.
 * Oversized and clipped by .hero's overflow so no edge is ever visible. */
.hero__sheen {
  position: absolute;
  inset: -30% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 46% at 50% 50%, rgba(150, 240, 198, 0.13), transparent 68%);
  animation: mat-sheen 34s var(--ease) infinite alternate;
}

/* Staggered entrance. `backwards` holds the from-state through the delay, so if
 * animations never run the type simply renders at rest rather than invisible. */
.hero--mat .eyebrow     { animation: mat-rise var(--t-slow) var(--ease-out) 120ms backwards; }
.hero--mat .hero__title { animation: mat-rise var(--t-slow) var(--ease-out) 240ms backwards; }
.hero--mat .t-lead      { animation: mat-rise var(--t-slow) var(--ease-out) 380ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .hero__sheen,
  .hero--mat::after,
  .hero--mat .eyebrow,
  .hero--mat .hero__title,
  .hero--mat .t-lead {
    animation: none;
  }
}

/* ──────────────────────────────────────────
 * Brand page — colour swatches and downloadable asset tiles
 * ────────────────────────────────────────── */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-5);
}
.swatch {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.swatch__chip {
  height: 104px;
  width: 100%;
  display: block;
  /* Ink sits almost on top of the surface colour, so outline every chip */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.swatch__meta { padding: var(--s-4) var(--s-5) var(--s-5); }
.swatch__name {
  font-size: 15px;
  font-weight: var(--w-semi);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
.swatch__hex {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 2px;
  text-transform: uppercase;
}
.swatch__rgb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin: 0 0 var(--s-3);
}
.swatch__use { font-size: 13px; color: var(--text-muted); margin: 0; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-6);
}
.asset {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease);
}
.asset:hover { border-color: var(--border-strong); }
/* Logos need the background they are designed for, so the preview carries it */
.asset__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  min-height: 150px;
}
.asset__preview--dark  { background: #1a1a1a; }
.asset__preview--light { background: #ffffff; }
.asset__preview--grid  {
  background:
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25% 75%, rgba(255,255,255,0.04) 75%) 0 0 / 20px 20px,
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25% 75%, rgba(255,255,255,0.04) 75%) 10px 10px / 20px 20px,
    var(--surface-2);
}
.asset__preview img { max-width: 100%; max-height: 110px; width: auto; height: auto; }
.asset__meta {
  padding: var(--s-5);
  border-top: 1px solid var(--border);
}
.asset__name {
  font-size: 15px;
  font-weight: var(--w-semi);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
.asset__desc { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--s-4); }
.asset__file {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin: 0 0 var(--s-4);
  word-break: break-all;
}

/* Do / Don't columns */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.rules__col {
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.rules__head {
  font-size: 15px;
  font-weight: var(--w-bold);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
.rules__col--do   .rules__head { color: var(--pdf-accent); }
.rules__col--dont .rules__head { color: var(--accent); }
.rules__list { list-style: none; margin: 0; padding: 0; }
.rules__list li {
  font-size: 14px;
  color: var(--text-muted);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  position: relative;
}
.rules__list li::before {
  position: absolute;
  left: 0;
  top: var(--s-2);
  font-weight: var(--w-bold);
}
.rules__col--do   .rules__list li::before { content: "+"; color: var(--pdf-accent); }
.rules__col--dont .rules__list li::before { content: "\2013"; color: var(--accent); }

@media (max-width: 760px) {
  .rules { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
 * Product cards row (procreate-style dark cards below hero)
 * ────────────────────────────────────────── */
.product-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
@media (max-width: 760px) {
  .product-cards { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
 * Bento grid — mixed-size tiled layout
 * Default: 3-col. Use modifier classes for span hints.
 * ────────────────────────────────────────── */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(280px, auto);
  gap: var(--s-5);
}
.bento > * { min-width: 0; }
.bento > .bento--wide { grid-column: span 2; }
.bento > .bento--tall { grid-row: span 2; }
.bento > .bento--full { grid-column: 1 / -1; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .bento > .bento--wide { grid-column: span 2; }
  .bento > .bento--tall { grid-row: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .bento--wide { grid-column: auto; }
  .bento > .bento--full { grid-column: auto; }
}

.product-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 56px);
  text-align: center;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.product-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.product-card__brand {
  font-size: 18px;
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-5);
  color: var(--text);
}
.product-card__brand--logo {
  display: flex;
  justify-content: center;
}
.product-card__brand--logo img {
  height: 28px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* Icon variant — the global `img { display: block }` reset means the card's
 * text-align can't centre this, so centre the box itself. */
.product-card__brand--icon {
  display: flex;
  justify-content: center;
}
.product-card__brand--icon img {
  width: 140px;
  object-fit: contain;
}
.product-card__brand .accent { color: var(--accent); font-weight: var(--w-bold); }
.product-card__brand .pdf-accent { color: var(--pdf-accent); font-weight: var(--w-bold); }
.product-card__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: var(--w-heavy);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-6);
  color: var(--text);
}
.product-card__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.product-card__price {
  font-size: 13px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* Product imagery zone at the bottom of a product card — bleeds to card edges,
   and grows to fill remaining card height when the grid stretches the card. */
.product-card--with-media {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.product-card__media {
  margin: var(--s-7) calc(-1 * clamp(32px, 5vw, 56px)) 0;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;            /* natural minimum proportions */
  flex: 1 0 auto;                   /* grow to fill remaining card height */
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
/* Wide cards: flatter media so the zone doesn't grow tall when card doubles in width */
.product-card.bento--wide .product-card__media {
  aspect-ratio: 21 / 9;
}

/* ──────────────────────────────────────────
 * Product stack — text card + image tile, stacked vertically inside a bento cell
 * ────────────────────────────────────────── */
.product-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.product-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
}
.product-stack.bento--wide .product-image {
  aspect-ratio: 21 / 9;
}
.product-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Themed gradient backdrop for the image tile (visible behind transparent images / fallback) */
.product-image.product-card--html { background: linear-gradient(135deg, rgba(255,90,31,0.18) 0%, var(--surface-2) 70%); }
.product-image.product-card--pdf  { background: linear-gradient(135deg, rgba(37,194,160,0.18) 0%, var(--surface-2) 70%); }
.product-image.product-card--ai   { background: linear-gradient(135deg, rgba(167,139,250,0.18) 0%, var(--surface-2) 70%); }
.product-image.product-card--sketch { background: linear-gradient(135deg, rgba(253,176,34,0.18) 0%, var(--surface-2) 70%); }
.product-image.product-card--xd   { background: linear-gradient(135deg, rgba(224,65,156,0.18) 0%, var(--surface-2) 70%); }

.product-image__fallback {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: var(--w-heavy);
  letter-spacing: -0.04em;
  opacity: 0.9;
}

/* Hero-fill variant — heroImg covers the whole card, content overlays on top */
.product-card--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 4vw, 56px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
.product-card.bento--wide.product-card--hero { min-height: 560px; }
.product-card--hero .product-card__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.product-card--hero .product-card__hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.product-card--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.2) 30%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0.92) 100%);
  z-index: 1;
  pointer-events: none;
}
.product-card--hero > * { position: relative; z-index: 2; }
.product-card--hero .product-card__brand,
.product-card--hero .product-card__title { color: #ffffff; }
.product-card--hero .product-card__price { color: rgba(255,255,255,0.7); }

/* In hero variant, the price/CTAs cluster sticks to the bottom */
.product-card--hero .product-card__title { margin-top: auto; }

/* Cover variant: image fills the zone edge-to-edge — drop the gradient overlay */
.product-card__media--cover {
  background: var(--surface-2);
  padding: 0;
}
.product-card--html .product-card__media--cover,
.product-card--pdf  .product-card__media--cover,
.product-card--ai   .product-card__media--cover,
.product-card--sketch .product-card__media--cover,
.product-card--xd   .product-card__media--cover {
  background: var(--surface-2);
}
/* Icon/SVG fallback inside the media zone gets size-clamped so it sits centered;
   cover/full-bleed images set their own dimensions inline and bypass this. */
.product-card__media > svg { max-width: 70%; max-height: 70%; }

/* ──────────────────────────────────────────
 * Asymmetric row — narrow product card + wider photo card
 * ────────────────────────────────────────── */
.asym-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--s-5);
}
@media (max-width: 880px) {
  .asym-row { grid-template-columns: 1fr; }
}

/* Photo card with text overlay (used as the wider half of asym-row) */
.photo-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
}
.photo-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.7) 100%);
  z-index: -1;
}
.photo-card__top {
  padding: var(--s-7) var(--s-7) 0;
}
.photo-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--w-medium);
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin: 0;
}
.photo-card__bottom {
  margin-top: auto;
  padding: var(--s-7);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.photo-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--w-semi);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: #ffffff;
  margin: 0;
  max-width: 22ch;
}

/* ──────────────────────────────────────────
 * Showcase — procreate-style alternating bands
 * ────────────────────────────────────────── */
.showcase {
  position: relative;
  padding-block: var(--section-y-lg);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}
.showcase--light { background: var(--bg-light); color: var(--text-dark); }
.showcase--cream { background: var(--bg-light-2); color: var(--text-dark); }

/* Themed glow per plugin */
.showcase--html::before,
.showcase--pdf::before,
.showcase--ai::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -10%;
  width: 80%;
  height: 80%;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  border-radius: 50%;
}
.showcase--html::before { background: radial-gradient(circle, rgba(255,90,31,0.35), transparent 60%); }
.showcase--pdf::before  { background: radial-gradient(circle, rgba(37,194,160,0.32), transparent 60%); }
.showcase--ai::before   { background: radial-gradient(circle, rgba(167,139,250,0.32), transparent 60%); }

.showcase__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--s-7), 6vw, var(--s-10));
  align-items: center;
}
.showcase--reverse .showcase__inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.showcase--reverse .showcase__copy { order: 2; }
.showcase--reverse .showcase__media { order: 1; }

@media (max-width: 880px) {
  .showcase__inner,
  .showcase--reverse .showcase__inner {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .showcase--reverse .showcase__copy { order: 0; }
  .showcase--reverse .showcase__media { order: 0; }
}

.showcase__eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--w-medium);
  color: var(--text-muted);
  margin: 0 0 var(--s-5);
}
.showcase--light .showcase__eyebrow,
.showcase--cream .showcase__eyebrow { color: var(--text-dark-muted); }

.showcase__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-heavy);
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
  margin: 0 0 var(--s-6);
  text-wrap: balance;
}
.showcase__lead {
  font-size: var(--t-body-xl);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin: 0 0 var(--s-7);
  max-width: 48ch;
  text-wrap: pretty;
}
.showcase--light .showcase__lead,
.showcase--cream .showcase__lead { color: var(--text-dark-muted); }

.showcase__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
}
.showcase__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.4;
}
.showcase__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.showcase--light .showcase__list li,
.showcase--cream .showcase__list li { color: var(--text-dark-muted); }

.showcase__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.showcase__media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}
.showcase--light .showcase__media,
.showcase--cream .showcase__media {
  background: #ffffff;
  border-color: var(--border-light);
}
.showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Decorative media (no image) */
.showcase__media--art {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
}
.showcase--html .showcase__media--art {
  background: linear-gradient(135deg, rgba(255,90,31,0.16) 0%, var(--surface-2) 80%);
}
.showcase--pdf .showcase__media--art {
  background: linear-gradient(135deg, rgba(37,194,160,0.16) 0%, var(--surface-2) 80%);
}
.showcase--ai .showcase__media--art {
  background: linear-gradient(135deg, rgba(167,139,250,0.16) 0%, var(--surface-2) 80%);
}

/* ──────────────────────────────────────────
 * Card grid
 * ────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Card */
.card {
  position: relative;
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.card--light {
  background: #ffffff;
  border-color: var(--border-light);
}
.card--light:hover {
  border-color: var(--border-light-strong);
  background: #ffffff;
}

.card--accent {
  border-color: var(--border);
}
.card--accent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  pointer-events: none;
  background: linear-gradient(135deg, var(--accent) 0%, transparent 40%);
  opacity: 0.06;
}
.card--html::after { background: linear-gradient(135deg, var(--html-accent) 0%, transparent 40%); }
.card--pdf::after  { background: linear-gradient(135deg, var(--pdf-accent) 0%, transparent 40%); }
.card--ai::after   { background: linear-gradient(135deg, var(--ai-accent) 0%, transparent 40%); }

.card__eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--w-medium);
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
}
.card--light .card__eyebrow { color: var(--text-dark-muted); }

.card__title {
  font-size: var(--t-subhead);
  font-weight: var(--w-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-4);
}
.card__body {
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 var(--s-6);
}
.card--light .card__body { color: var(--text-dark-muted); }

/* Feature card — smaller, denser */
.feature {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.feature--light {
  background: #ffffff;
  border-color: var(--border-light);
}
.feature__icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--s-5);
  color: var(--accent);
}
.feature--light .feature__icon { background: var(--bg-light-2); }
.feature__title {
  font-size: 17px;
  font-weight: var(--w-semi);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
.feature__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.feature--light .feature__body { color: var(--text-dark-muted); }

/* ──────────────────────────────────────────
 * Step / numbered item
 * ────────────────────────────────────────── */
.step { display: block; }
.step__num {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.section--light .step__num,
.section--cream .step__num { color: var(--text-dark-muted); }
.step__num::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.step__title {
  font-size: var(--t-subhead);
  font-weight: var(--w-semi);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-3);
}
.step__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.section--light .step__body,
.section--cream .step__body { color: var(--text-dark-muted); }

/* ──────────────────────────────────────────
 * Chips / tag pills
 * ────────────────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover {
  background: var(--surface-3);
  color: var(--text);
}
.section--light .chip,
.section--cream .chip {
  background: rgba(0,0,0,0.04);
  border-color: var(--border-light);
  color: var(--text-dark-muted);
}
.section--light .chip:hover,
.section--cream .chip:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text-dark);
}

/* ──────────────────────────────────────────
 * Marquee / row of logos
 * ────────────────────────────────────────── */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}
.logo-row__item {
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--light .logo-row__item,
.section--cream .logo-row__item { color: var(--text-dark-muted); }

/* ──────────────────────────────────────────
 * FAQ — refined disclosure rows
 * ────────────────────────────────────────── */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.section--light .faq,
.section--cream .faq { border-top-color: var(--border-light); }
.section--light .faq__item,
.section--cream .faq__item { border-bottom-color: var(--border-light); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  font-size: var(--t-body-lg);
  font-weight: var(--w-semi);
  letter-spacing: var(--tracking-tight);
  color: inherit;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 28px;
  font-weight: var(--w-regular);
  line-height: 1;
  color: var(--text-muted);
  transition: transform var(--t-base) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body {
  padding: 0 0 var(--s-7);
  max-width: 70ch;
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--text-muted);
}
.section--light .faq__body,
.section--cream .faq__body { color: var(--text-dark-muted); }
.faq__body a { color: var(--accent); font-weight: var(--w-semi); }

/* ──────────────────────────────────────────
 * Form — text inputs, selects, textarea
 * ────────────────────────────────────────── */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.form-honey { position: absolute; left: -10000px; top: -10000px; }
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.form-label {
  font-size: 14px;
  font-weight: var(--w-semi);
  color: var(--text);
  letter-spacing: -0.005em;
}
.form-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.form-input:hover { border-color: var(--border-strong); }
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}
.form-input::placeholder { color: var(--text-subtle); }

.form-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.55;
  font-family: var(--font-sans);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a5a39d' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Fieldset reset for radio groups */
.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.form-fieldset legend {
  padding: 0;
}

/* Visual radio cards — used as plugin selector in the contact form */
.form-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
}
.form-radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--s-4) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.form-radio-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.form-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form-radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.form-radio-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.form-radio-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.form-radio-card__icon img { width: 36px; height: 36px; object-fit: contain; }
.form-radio-card__suffix {
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: var(--text);
}
.form-radio-card__name {
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--text);
  letter-spacing: -0.005em;
}

/* File upload zone */
.form-file {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  color: var(--text-muted);
}
.form-file:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  color: var(--text);
}
.form-file input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.form-file__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.form-file__primary {
  font-size: 15px;
  font-weight: var(--w-semi);
  color: var(--text);
  letter-spacing: -0.005em;
}
.form-file__hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Checkbox */
.form-row--agree { padding-top: var(--s-3); }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.form-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.form-check__box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  margin-top: 2px;
}
.form-check:hover .form-check__box { border-color: var(--text-muted); }
.form-check input:checked + .form-check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.form-check input:checked + .form-check__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.form-check input:focus-visible + .form-check__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.form-check__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: -0.005em;
}
.form-check__text a {
  color: var(--accent);
  font-weight: var(--w-semi);
}
.form-check__text a:hover { color: var(--accent-hover); }

/* Section-aware tints */
.section--light .form-input,
.section--cream .form-input { background: #ffffff; border-color: var(--border-light); color: var(--text-dark); }
.section--light .form-input:focus,
.section--cream .form-input:focus { background: #ffffff; border-color: var(--accent); }
.section--light .form-label,
.section--cream .form-label { color: var(--text-dark); }
.section--light .form-hint,
.section--cream .form-hint { color: var(--text-dark-muted); }

/* ──────────────────────────────────────────
 * Highlighted span — soft warm background behind a key phrase
 * ────────────────────────────────────────── */
.hl {
  background: linear-gradient(180deg, transparent 40%, rgba(255, 222, 120, 0.55) 40%);
  padding: 0 4px;
  border-radius: 2px;
  color: inherit;
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.section--cream .hl,
.section--light .hl,
.hero--light .hl { color: var(--text-dark); }

/* Featured email link on a light contact page */
.contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: var(--w-bold);
  color: var(--text-dark);
  letter-spacing: var(--tracking-tight);
  margin: var(--s-3) 0 var(--s-6);
  text-decoration: none;
  border-bottom: 2px solid var(--border-light-strong);
  padding-bottom: 4px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.contact-email:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* Info box — soft tinted callout */
.info-box {
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid;
  font-size: 15px;
  line-height: 1.65;
}
.info-box p { margin: 0 0 var(--s-3); }
.info-box p:last-child { margin: 0; }
.info-box a { font-weight: var(--w-semi); }
.info-box ul { margin: 0; padding-left: 1.2em; }
.info-box--note {
  background: #fdf5d8;
  border-color: #ecd877;
  color: #5e4a09;
}
.info-box--note a { color: #5e4a09; }
.info-box--warn {
  background: #fbe1e1;
  border-color: #ecb1b1;
  color: #6a1d1d;
}
.info-box--warn a { color: #6a1d1d; }

/* "No" list — honest expectations */
.no-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.no-list li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  letter-spacing: -0.005em;
}
.no-list__no {
  display: inline-block;
  font-weight: var(--w-bold);
  color: var(--accent);
  letter-spacing: -0.01em;
  margin-right: 4px;
}

/* Self-serve helper list — small icon + sentence rows above the contact CTAs */
.self-serve {
  list-style: none;
  padding: 0;
  margin: var(--s-8) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  text-align: left;
  max-width: 560px;
}
.self-serve li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dark-muted);
}
.self-serve svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-dark);
  opacity: 0.55;
}
.self-serve p { margin: 0; }
.self-serve a {
  color: var(--text-dark);
  font-weight: var(--w-semi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.self-serve a:hover { color: var(--accent); }

/* Documentation pill with stacked label */
.btn-docs {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-8);
  padding: 14px 22px 14px 18px;
  background: var(--text-dark);
  color: #ffffff;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-docs:hover { background: var(--accent); transform: translateY(-1px); }
.btn-docs svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #ffffff;
}
.btn-docs__title {
  display: block;
  font-size: 15px;
  font-weight: var(--w-semi);
  letter-spacing: -0.005em;
}
.btn-docs__sub {
  display: block;
  font-size: 12px;
  font-weight: var(--w-regular);
  opacity: 0.7;
  letter-spacing: -0.003em;
  margin-top: 1px;
}

/* Team signature block — signed-off feel with a script-style signature image */
.signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.signature__sig {
  height: 64px;
  width: auto;
  max-width: 320px;
  display: block;
}
.signature__role {
  margin: 0;
  font-size: 13px;
  color: var(--text-dark-muted);
  letter-spacing: -0.005em;
}

/* ──────────────────────────────────────────
 * Sentence-style form ("letter") — fields flow inline
 * ────────────────────────────────────────── */
.form-letter {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.form-letter__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: var(--w-medium);
  color: var(--text-dark);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.form-letter__lead {
  color: var(--text-dark);
  font-weight: var(--w-medium);
  flex-shrink: 0;
}
.form-letter__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 2px 6px 6px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--border-light-strong);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  line-height: 1.2;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.form-letter__input:hover { border-bottom-color: var(--text-dark-subtle); }
.form-letter__input:focus { border-bottom-color: var(--accent); }
.form-letter__input::placeholder {
  color: var(--text-dark-subtle);
  font-style: italic;
  font-weight: var(--w-regular);
}

.form-letter__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 22px;
}

.form-letter__block {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.form-letter__lead--block {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: var(--w-medium);
  color: var(--text-dark);
  letter-spacing: -0.01em;
}
.form-letter__textarea {
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  color: var(--text-dark);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: var(--w-regular);
  line-height: 1.6;
  letter-spacing: -0.005em;
  resize: vertical;
  min-height: 180px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.form-letter__textarea:hover { border-color: var(--border-light-strong); }
.form-letter__textarea:focus { border-color: var(--accent); }
.form-letter__textarea::placeholder {
  color: var(--text-dark-subtle);
  font-style: italic;
}

/* File + checkbox on cream surface */
.section--cream .form-file {
  background: #ffffff;
  border-color: var(--border-light-strong);
  color: var(--text-dark-muted);
}
.section--cream .form-file:hover { background: #ffffff; border-color: var(--accent); color: var(--text-dark); }
.section--cream .form-file__primary { color: var(--text-dark); }
.section--cream .form-file__hint { color: var(--text-dark-muted); }
.section--cream .form-check__box { background: #ffffff; border-color: var(--border-light-strong); }
.section--cream .form-check__text { color: var(--text-dark-muted); }

/* ──────────────────────────────────────────
 * Footer
 * ────────────────────────────────────────── */
.foot {
  background: var(--bg);
  color: var(--text);
  padding-block: var(--s-8) var(--s-6);
  border-top: 1px solid var(--border);
}
/* Top — wordmark stacked over the tagline for a clean brand block */
.foot__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-bottom: var(--s-6);
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
}
.foot__tagline {
  font-size: 22px;
  font-weight: var(--w-medium);
  color: var(--text-muted);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  margin: 0;
}

/* Main — two visual clusters of columns */
.foot__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
}
.foot__cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
/* Split cluster — top row of columns, hairline, bottom row of smaller columns */
.foot__cluster--split {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.foot__cluster-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
}
.foot__cluster-divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 0;
}
.foot__links--mini a {
  font-size: 13px;
  color: var(--text-muted);
}
.foot__links--mini a:hover { color: var(--text); }
@media (max-width: 480px) {
  .foot__cluster-row { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 880px) {
  .foot__main { grid-template-columns: 1fr; gap: var(--s-8); }
}
@media (max-width: 480px) {
  .foot__cluster { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* Column heading — compact, hierarchy still reads vs link size */
.foot__col h4 {
  font-size: 13px;
  font-weight: var(--w-semi);
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 var(--s-4);
}
.foot__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.foot__links a {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--w-regular);
  letter-spacing: -0.005em;
}
.foot__links a:hover { color: var(--text); }

/* Plugins column with nested per-plugin sub-links */
.foot__plugin-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.foot__plugin {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.foot__plugin-name {
  font-size: 14px;
  font-weight: var(--w-semi);
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0;
}
.foot__plugin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.foot__plugin-links a {
  position: relative;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: var(--w-regular);
}
.foot__plugin-links a:hover { color: var(--text); }
.foot__plugin-links a + a::before {
  content: "·";
  position: absolute;
  left: -8px;
  color: var(--text-faint);
  pointer-events: none;
}
.foot__plugin-extras {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.foot__plugin-extras a {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: var(--w-regular);
}
.foot__plugin-extras a:hover { color: var(--text); }

/* Bottom — two rows: utilities (lang/social/legal) then origin/copy */
.foot__bottom {
  margin-top: var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.foot__bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
}
.foot__bottom-row--utilities {
  justify-content: space-between;
}
.foot__bottom-row--copy {
  font-size: 13px;
  color: var(--text-muted);
  gap: var(--s-3) var(--s-5);
}
.foot__bottom-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.foot__bottom-links a {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--w-regular);
  letter-spacing: -0.005em;
}
.foot__bottom-links a:hover { color: var(--text); }

.foot__origin {
  font-weight: var(--w-semi);
  color: var(--text);
  margin: 0;
}
.foot__copy {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
  max-width: 60ch;
}

/* Language picker — compact pill button, never stretches */
.foot__lang {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-5);
  padding: 8px 14px 8px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.foot__lang:hover { background: var(--surface-2); border-color: var(--text-muted); }
.foot__lang:disabled { cursor: default; opacity: 0.85; }
.foot__lang:disabled:hover { background: transparent; border-color: var(--border-strong); }
.foot__lang svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}
.foot__lang-chev {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
}
.foot__social {
  display: flex;
  gap: var(--s-2);
}
.foot__social a {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  display: inline-grid;
  place-items: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.foot__social a:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.foot__social img {
  width: 16px;
  height: 16px;
  filter: invert(85%);
}

/* ──────────────────────────────────────────
 * Stat row
 * ────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-7);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--s-7);
}
.section--light .stats,
.section--cream .stats {
  border-color: var(--border-light);
}
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat__value {
  display: block;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--w-heavy);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-3);
}
.stat__label {
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.section--light .stat__label,
.section--cream .stat__label { color: var(--text-dark-muted); }

/* ──────────────────────────────────────────
 * Notice banner
 * ────────────────────────────────────────── */
.notice {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.notice__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 10px;
  font-size: 13px;
}
.notice__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.notice__close:hover { color: var(--text); }

/* ──────────────────────────────────────────
 * Prose (for legal pages)
 * ────────────────────────────────────────── */
.prose {
  max-width: var(--max-w-prose);
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dark-muted);
}
.prose h1 { font-size: var(--t-headline); font-weight: var(--w-heavy); letter-spacing: var(--tracking-tightest); line-height: 1; margin: 0 0 var(--s-5); color: var(--text-dark); }
.prose h2 { font-size: var(--t-subhead); font-weight: var(--w-bold); letter-spacing: var(--tracking-tight); line-height: 1.15; margin: var(--s-8) 0 var(--s-4); color: var(--text-dark); }
.prose h3 { font-size: 22px; font-weight: var(--w-semi); margin: var(--s-7) 0 var(--s-3); color: var(--text-dark); }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--s-5); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: var(--s-2); }
.prose a { color: var(--accent); font-weight: var(--w-semi); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose hr { border: 0; height: 1px; background: var(--border-light); margin: var(--s-7) 0; }
.prose strong { color: var(--text-dark); font-weight: var(--w-semi); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ──────────────────────────────────────────
 * Utilities
 * ────────────────────────────────────────── */
.center-text { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-5 { display: flex; flex-direction: column; gap: var(--s-5); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-7 { display: flex; flex-direction: column; gap: var(--s-7); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row--lg { gap: var(--s-5); }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.divider-dot { color: var(--text-muted); padding-inline: var(--s-2); }
</style>
  <style></style>

  <!-- Structured Data: Organization -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "@id": "https://tomake.design/#organization",
    "name": "tomakedesign LLC",
    "legalName": "tomakedesign LLC",
    "alternateName": ["tomake.design", "tofig.design", "@tomakedesign", "html.tomake.design", "pdf.tomake.design", "psd.tomake.design", "illustrator.tomake.design", "eps.tomake.design"],
    "url": "https://tomake.design",
    "logo": {
      "@type": "ImageObject",
      "url": "https://tomake.design/brand/logo-icon.svg",
      "width": 512,
      "height": 512
    },
    "image": "https://tomake.design/brand/og-image.png",
    "description": "Free Figma plugins to import websites, HTML/CSS, AI-generated code, and PDFs as fully editable designs. 100% free, no signup required.",
    "foundingDate": "2024-12-01",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "1209 Mountain Road Pl NE, Ste R",
      "addressLocality": "Albuquerque",
      "addressRegion": "NM",
      "postalCode": "87110",
      "addressCountry": "US"
    },
    "contactPoint": [
      {
        "@type": "ContactPoint",
        "email": "support@tomake.design",
        "contactType": "customer support",
        "availableLanguage": "English"
      }
    ],
    "sameAs": [
      "https://tofig.design",
      "https://x.com/tomakedesign",
      "https://www.figma.com/@tomakedesign",
      "https://discord.com/invite/VVArNqBGjB",
      "https://github.com/tomakedesign",
      "https://chromewebstore.google.com/detail/ijoegnplinjhfdnhgakjgfejieiclppi"
    ],
    "knowsAbout": [
      "Figma",
      "Figma plugins",
      "HTML to Figma",
      "PDF to Figma",
      "PSD to Figma",
      "Illustrator to Figma",
      "EPS to Figma",
      "Adobe Photoshop",
      "Adobe Illustrator",
      "PostScript",
      "Vector graphics",
      "Design file conversion",
      "Design systems",
      "Web design",
      "UI design",
      "Design tools"
    ],
    "slogan": "Anything to Figma. Instantly."
  }
  </script>

  <!-- Structured Data: WebSite for search box -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "@id": "https://tomake.design/#website",
    "name": "tomake.design",
    "alternateName": ["tofig.design", "tofig", "tomake", "html.tomake.design", "pdf.tomake.design", "psd.tomake.design", "illustrator.tomake.design", "eps.tomake.design"],
    "url": "https://tomake.design",
    "description": "Free Figma plugins to import websites, PDFs, Photoshop, Illustrator and EPS files as editable Figma designs. Formerly tofig.design.",
    "publisher": {
      "@id": "https://tomake.design/#organization"
    }
  }
  </script>

  <!-- Structured Data: Software Applications.
       Driven by _data/plugins.js so the catalog and the rich-result markup
       cannot drift apart — add a plugin there and it appears here. -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "ItemList",
    "name": "Free Figma plugins by tomake.design",
    "numberOfItems": 5,
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@type": "SoftwareApplication",
          "name": "html.tomake.design",
          "alternateName": "html -> figma",
          "description": "Convert any web content into fully editable designs.",
          "applicationCategory": "DesignApplication",
          "operatingSystem": "Figma",
          "softwareRequirements": "Figma account",
          "isAccessibleForFree": true,
          "url": "https://html.tomake.design",
          "image": "https://tomake.design/img/plugin-icon/html-tomake-design.png",
          "sameAs": "https://www.figma.com/community/plugin/1557932447766289380","offers": [
            {
              "@type": "Offer",
              "name": "Free",
              "price": "0",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            },
            {
              "@type": "Offer",
              "name": "Pro",
              "price": "5.90",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "5.90",
                "priceCurrency": "USD",
                "billingDuration": 1,
                "billingIncrement": 1,
                "unitCode": "MON"
              }
            }
          ],
          "creator": { "@id": "https://tomake.design/#organization" }
        }
      },
      {
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@type": "SoftwareApplication",
          "name": "pdf.tomake.design",
          "alternateName": "pdf -> figma",
          "description": "Convert any PDF document into Figma designs. 100% locally.",
          "applicationCategory": "DesignApplication",
          "operatingSystem": "Figma",
          "softwareRequirements": "Figma account",
          "isAccessibleForFree": true,
          "url": "https://pdf.tomake.design",
          "image": "https://tomake.design/img/plugin-icon/pdf-tomake-design.png",
          "sameAs": "https://www.figma.com/community/plugin/1556109033323159906","offers": [
            {
              "@type": "Offer",
              "name": "Free",
              "price": "0",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            },
            {
              "@type": "Offer",
              "name": "Pro",
              "price": "29.00",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock",
              "priceSpecification": {
                "@type": "UnitPriceSpecification",
                "price": "29.00",
                "priceCurrency": "USD"
              }
            }
          ],
          "creator": { "@id": "https://tomake.design/#organization" }
        }
      },
      {
        "@type": "ListItem",
        "position": 3,
        "item": {
          "@type": "SoftwareApplication",
          "name": "psd.tomake.design",
          "alternateName": "psd -> figma",
          "description": "Import any Adobe Photoshop file (.psd, .psb) to Figma",
          "applicationCategory": "DesignApplication",
          "operatingSystem": "Figma",
          "softwareRequirements": "Figma account",
          "isAccessibleForFree": true,
          "url": "https://psd.tomake.design",
          "image": "https://tomake.design/img/plugin-icon/psd-tomake-design.png",
          "sameAs": "https://www.figma.com/community/plugin/1675111124655821111","offers": [
            {
              "@type": "Offer",
              "name": "Free",
              "price": "0",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            }
          ],
          "creator": { "@id": "https://tomake.design/#organization" }
        }
      },
      {
        "@type": "ListItem",
        "position": 4,
        "item": {
          "@type": "SoftwareApplication",
          "name": "illustrator.tomake.design",
          "alternateName": "illustrator -> figma",
          "description": "Import Adobe Illustrator files (.ai, .eps) to Figma",
          "applicationCategory": "DesignApplication",
          "operatingSystem": "Figma",
          "softwareRequirements": "Figma account",
          "isAccessibleForFree": true,
          "url": "https://illustrator.tomake.design",
          "image": "https://tomake.design/img/plugin-icon/illustrator-tomake-design.png",
          "sameAs": "https://www.figma.com/community/plugin/1675139964504328568","offers": [
            {
              "@type": "Offer",
              "name": "Free",
              "price": "0",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            }
          ],
          "creator": { "@id": "https://tomake.design/#organization" }
        }
      },
      {
        "@type": "ListItem",
        "position": 5,
        "item": {
          "@type": "SoftwareApplication",
          "name": "eps.tomake.design",
          "alternateName": "eps -> figma",
          "description": "Import PostScript files (.eps) files to Figma.",
          "applicationCategory": "DesignApplication",
          "operatingSystem": "Figma",
          "softwareRequirements": "Figma account",
          "isAccessibleForFree": true,
          "url": "https://eps.tomake.design",
          "image": "https://tomake.design/img/plugin-icon/eps-tomake-design.png",
          "sameAs": "https://www.figma.com/community/plugin/1675139847663932791","offers": [
            {
              "@type": "Offer",
              "name": "Free",
              "price": "0",
              "priceCurrency": "USD",
              "availability": "https://schema.org/InStock"
            }
          ],
          "creator": { "@id": "https://tomake.design/#organization" }
        }
      }
    ]
  }
  </script>

  <!-- Structured Data: BreadcrumbList -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://tomake.design"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "",
        "item": "https://tomake.design/feed.xml"
      }
    ]
  }
  </script>

  <!-- Structured Data: Brand mention for Figma Community -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Brand",
    "@id": "https://tomake.design/#brand",
    "name": "tomake.design",
    "alternateName": ["tofig.design", "@tomakedesign", "html.tomake.design", "pdf.tomake.design", "psd.tomake.design", "illustrator.tomake.design", "eps.tomake.design"],
    "description": "Free Figma plugins for importing websites, PDFs, Photoshop, Illustrator and EPS files into Figma. Find us on Figma Community as @tomakedesign.",
    "url": "https://tomake.design",
    "logo": "https://tomake.design/brand/logo-icon.svg"
  }
  </script>

  <!-- The site-wide FAQ schema that used to sit here was emitted on every page
       while its answers were never rendered anywhere. Google requires FAQPage
       content to be visible on the page it marks up, so it now lives with the
       visible FAQ on the homepage, and each plugin page carries its own. -->

  <!-- Structured Data: HowTo. The tool list is generated from
       _data/plugins.js; step 1 names the formats in prose, because splicing
       taglines into a sentence does not read as English. -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "How to import a file into Figma",
    "description": "Convert websites, HTML/CSS, PDFs, Photoshop files, Illustrator files and EPS artwork into editable Figma designs using free plugins from tomake.design (formerly tofig.design).",
    "totalTime": "PT1M",
    "supply": [
      { "@type": "HowToSupply", "name": "A Figma account (free or paid)" },
      { "@type": "HowToSupply", "name": "A website URL, or a .pdf, .psd, .psb, .ai or .eps file" }
    ],
    "tool": [
      { "@type": "HowToTool", "name": "html.tomake.design" },
      { "@type": "HowToTool", "name": "pdf.tomake.design" },
      { "@type": "HowToTool", "name": "psd.tomake.design" },
      { "@type": "HowToTool", "name": "illustrator.tomake.design" },
      { "@type": "HowToTool", "name": "eps.tomake.design" }
    ],
    "step": [
      {
        "@type": "HowToStep",
        "position": 1,
        "name": "Pick the plugin for your file",
        "text": "There is one plugin per format: html.tomake.design for websites and HTML/CSS, pdf.tomake.design for PDF documents, psd.tomake.design for Photoshop files, illustrator.tomake.design for Illustrator artwork, and eps.tomake.design for EPS files."
      },
      {
        "@type": "HowToStep",
        "position": 2,
        "name": "Install it from Figma Community",
        "text": "Every plugin is free to install, with no trial, no credit card and no signup."
      },
      {
        "@type": "HowToStep",
        "position": 3,
        "name": "Add your URL or file",
        "text": "Open the plugin inside Figma, then paste a website URL or drag in your document."
      },
      {
        "@type": "HowToStep",
        "position": 4,
        "name": "Edit the result in Figma",
        "text": "The import arrives as fully editable Figma layers. Text, colours, vectors and layout can all be changed."
      }
    ]
  }
  </script>
</head>
<body>
  <header class="nav">
    <div class="wrap nav__inner">
      <a href="/" class="nav__brand" aria-label="tomake.design home">
        <img src="/logos/tomake-design.svg" alt="tomake.design" style="height: 32px; width: auto;">
      </a>
      <nav class="nav__links" aria-label="Primary">
        <div class="nav__item">
          <a href="/html-to-figma/" class="nav__link nav__link--drop">Plugins<span class="nav__chev" aria-hidden="true"></span></a>
          <div class="nav__menu" role="menu">
            
            <a href="/html-to-figma/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                
                  <img src="/img/html-tomake-design.png" alt="">
                
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">html.tomake.design</span>
                <span class="nav__menu-sub">Convert any web content into fully editable designs.</span>
              </span>
            </a>
            
            <a href="/pdf-to-figma/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                
                  <img src="/img/pdf-tomake-design.png" alt="">
                
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">pdf.tomake.design</span>
                <span class="nav__menu-sub">Convert any PDF document into Figma designs. 100% locally.</span>
              </span>
            </a>
            
            <a href="/psd-to-figma/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                
                  <img src="/img/psd-tomake-design.png" alt="">
                
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">psd.tomake.design</span>
                <span class="nav__menu-sub">Import any Adobe Photoshop file (.psd, .psb) to Figma</span>
              </span>
            </a>
            
            <a href="/illustrator-to-figma/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                
                  <img src="/img/illustrator-tomake-design.png" alt="">
                
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">illustrator.tomake.design</span>
                <span class="nav__menu-sub">Import Adobe Illustrator files (.ai, .eps) to Figma</span>
              </span>
            </a>
            
            <a href="/eps-to-figma/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                
                  <img src="/img/eps-tomake-design.png" alt="">
                
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">eps.tomake.design</span>
                <span class="nav__menu-sub">Import PostScript files (.eps) files to Figma.</span>
              </span>
            </a>
            
          </div>
        </div>

        <div class="nav__item">
          <a href="https://docs.tomake.design" class="nav__link nav__link--drop">Learning<span class="nav__chev" aria-hidden="true"></span></a>
          <div class="nav__menu" role="menu">
            <a href="https://docs.tomake.design" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" style="width: 20px; height: 20px;"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">Documentation</span>
                <span class="nav__menu-sub">Setup, walkthroughs &amp; tips.</span>
              </span>
            </a>
            <a href="https://discord.com/invite/VVArNqBGjB" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="var(--ai-accent)" stroke-width="1.5" style="width: 20px; height: 20px;"><path d="M17 11a5 5 0 0 0-10 0v5a4 4 0 0 1-4 4h18a4 4 0 0 1-4-4z"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">Discord community</span>
                <span class="nav__menu-sub">Get help, share work, shape the roadmap.</span>
              </span>
            </a>
            <a href="https://www.figma.com/@tomakedesign" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                <svg viewBox="0 0 24 24" fill="var(--pdf-accent)" style="width: 18px; height: 18px;"><circle cx="12" cy="12" r="4"/><path d="M12 8V0M12 24v-8M0 12h8M16 12h8" stroke="var(--pdf-accent)" stroke-width="2"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">Figma Community</span>
                <span class="nav__menu-sub">All plugins on @tomakedesign.</span>
              </span>
            </a>
          </div>
        </div>

        <div class="nav__item">
          <a href="/about/" class="nav__link nav__link--drop">Company<span class="nav__chev" aria-hidden="true"></span></a>
          <div class="nav__menu" role="menu">
            <a href="/about/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" style="width: 20px; height: 20px;"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">Who we are</span>
                <span class="nav__menu-sub">The studio behind the plugins.</span>
              </span>
            </a>
            <a href="mailto:support@tomake.design" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" style="width: 20px; height: 20px;"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">Contact</span>
                <span class="nav__menu-sub">support@tomake.design</span>
              </span>
            </a>
            <a href="/privacy/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="1.5" style="width: 20px; height: 20px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">Privacy &amp; legal</span>
                <span class="nav__menu-sub">Terms, privacy, and refunds.</span>
              </span>
            </a>
            <a href="/statement-on-ai/" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon" style="background: linear-gradient(135deg, rgba(167,139,250,0.3), rgba(167,139,250,0.1));">
                <svg viewBox="0 0 24 24" fill="none" stroke="var(--ai-accent)" stroke-width="1.5" style="width: 20px; height: 20px;"><path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8 5.8 21.3l2.4-7.4L2 9.4h7.6z"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">Statement on AI</span>
                <span class="nav__menu-sub">How we use AI, what we don't do.</span>
              </span>
            </a>
            <a href="https://github.com/tomakedesign" class="nav__menu-item" role="menuitem">
              <span class="nav__menu-icon">
                <svg viewBox="0 0 24 24" fill="var(--text-muted)" style="width: 20px; height: 20px;"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.1-.4-.6-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.8.1 3.2.8.8 1.3 1.9 1.3 3.1 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3"/></svg>
              </span>
              <span class="nav__menu-text">
                <span class="nav__menu-title">GitHub</span>
                <span class="nav__menu-sub">Open source &amp; issues.</span>
              </span>
            </a>
          </div>
        </div>
      </nav>
    </div>
  </header>

  <?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>tomake.design</title>
    <link>https://tomake.design/</link>
    <description>Free Figma plugins for importing websites, HTML/CSS, and PDFs as editable designs.</description>
    <language>en-us</language>
    <atom:link href="https://tomake.design/feed.xml" rel="self" type="application/rss+xml"/>

    <item>
      <title>HTML to Figma Plugin</title>
      <link>https://tomake.design/html-to-figma/</link>
      <guid>https://tomake.design/html-to-figma/</guid>
      <description>Transform websites and HTML into editable Figma designs. Import any URL, paste code, or use AI-generated HTML. 100% free.</description>
    </item>

    <item>
      <title>PDF to Figma Plugin</title>
      <link>https://tomake.design/pdf-to-figma/</link>
      <guid>https://tomake.design/pdf-to-figma/</guid>
      <description>Convert PDFs into layered, editable Figma designs. Choose between vector precision or image modes. 100% private, local processing.</description>
    </item>

    <item>
      <title>AI to Figma</title>
      <link>https://tomake.design/ai-to-figma/</link>
      <guid>https://tomake.design/ai-to-figma/</guid>
      <description>Import AI-generated code from ChatGPT, Claude, v0, Bolt, Lovable, and Replit directly into Figma as editable layers.</description>
    </item>
  </channel>
</rss>


  
</body>
</html>
