/* Appify landing pages: shared base stylesheet.
   Extracted from the hub page 2026-08-27. Served at /base.css and linked by
   every page built after that date, so nine pages do not carry nine copies of
   the same 22KB. The wallpaper and sticker pages keep their own inline CSS;
   they predate this and there is no reason to disturb what works.
   Page-specific rules go in each page's own <style> block, after the link. */

  :root{
    --ink:#1E2529; --ink-soft:#39434a;
    --teal:#17B39B; --teal-dark:#0b7565; --blue:#3D8BE0; --blue-dark:#2f74c2;
    --yellow:#FFC93C; --coral:#E4586A; --violet:#7C5CE0;
    --paper:#fff; --mist:#F5F7F8; --grey:#5d6b74; --line:#e3e8ea;
    /* --line is decorative (1.24:1). Anything that bounds a CONTROL needs 3:1. */
    --line-strong:#84919c;
    --maxw:1140px;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
    padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
  .skip:focus{left:0}
  body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
  h1,h2,h3{line-height:1.14;letter-spacing:-.02em;margin:0 0 .5em}
  h1{font-size:clamp(2rem,4.4vw,3.15rem);font-weight:800}
  h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800}
  h3{font-size:1.2rem;font-weight:700}
  p{margin:0 0 1rem}
  a{color:var(--blue-dark)}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .narrow{max-width:730px;margin:0 auto}
  section{padding:clamp(54px,7vw,92px) 0}
  .mist{background:var(--mist)}
  .dark{background:var(--ink);color:#fff}
  .dark h2,.dark h3{color:#fff}
  .eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#0b7565;margin:0 0 1rem}

  .btn{display:inline-block;background:var(--blue-dark);color:#fff;text-decoration:none;font-weight:700;font-size:1.05rem;padding:16px 34px;border-radius:10px;box-shadow:0 6px 18px rgba(61,139,224,.3);transition:transform .15s,background .15s}
  .btn:hover{background:#265f9f;transform:translateY(-1px)}
  .btn2{display:inline-block;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.05rem;padding:15px 30px;border-radius:10px;border:2px solid var(--line-strong);transition:.15s}
  .btn2:hover{border-color:var(--teal);color:var(--teal-dark);transform:translateY(-1px)}
  /* Announced, never shown. Total-only, so a keystroke is one number not five rows. */
  .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .dark .btn2{background:transparent;color:#fff;border-color:#707d87}
  .dark .btn2:hover{border-color:var(--teal);color:var(--teal)}
  .btn-note{font-size:.87rem;color:var(--grey);margin-top:13px}
  .dark .btn-note{color:#a9b6bf}
  .btnrow{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
  .ctaband{text-align:center;margin-top:46px}
  .ctaband .btnrow{justify-content:center}

  .hero{background:linear-gradient(180deg,#eef6fb 0%,#fff 78%)}
  .herogrid{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center}
  .hero .hook{font-size:1.06rem;color:var(--ink-soft);margin-bottom:1.3rem}
  .hero .support{color:var(--grey);font-size:.99rem;margin-bottom:1.9rem}

  /* ---- The switching calculator ----
     One shell, nine products. Changing the tab swaps the inputs and the pricing
     math together, because that is the claim the page is making: it is not
     nine apps, it is one that reshapes. */
  .calc{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(30,37,41,.13);overflow:hidden;min-width:0}
  .herogrid > div{min-width:0}
  .calc-top{display:flex;align-items:center;gap:9px;padding:12px 18px;background:var(--mist);border-bottom:1px solid var(--line)}
  .dot{width:11px;height:11px;border-radius:50%}
  .calc-top span.u{margin-left:8px;font-size:.79rem;color:var(--grey);font-weight:600}

  /* The product picker sits ABOVE the mock browser, not inside it. Tucked
     between the chrome bar and the form it shared their grey and read as one
     dead band, so nobody could tell the tabs were the control. Chips wrap
     rather than scroll: all nine visible is itself part of the pitch. */
  .picker{margin-bottom:14px}
  .pickerlab{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--grey);margin:0 0 10px}
  .pickerlab::after{content:'';flex:1;height:1px;background:var(--line)}
  .modes{display:flex;flex-wrap:wrap;gap:7px}
  .mode{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:10px 16px;font-size:.88rem;
    font-weight:700;color:var(--ink-soft);cursor:pointer;font-family:inherit;white-space:nowrap;
    transition:.13s;box-shadow:0 1px 3px rgba(30,37,41,.07)}
  .mode:hover{border-color:var(--blue);color:var(--blue-dark);transform:translateY(-1px)}
  .mode[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff;
    box-shadow:0 5px 14px rgba(61,139,224,.34)}
  /* Capped so a long option set scrolls inside the browser chrome instead of
     making the hero three screens tall. Blinds and cabinet doors both run well
     past this, which is the point: real configurators are long. */
  .calc-body{padding:20px 22px;max-height:430px;overflow-y:auto}
  .calc-body::-webkit-scrollbar{width:8px}
  .calc-body::-webkit-scrollbar-thumb{background:#d3dbe0;border-radius:4px}

  .fg{margin-bottom:15px}
  .fg:last-child{margin-bottom:0}
  .fhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 7px}
  .flabel{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin:0}
  .fchip{font-size:.72rem;font-weight:700;color:var(--grey);white-space:nowrap}
  .fchip.add{color:var(--teal-dark)}
  .flim{display:flex;justify-content:space-between;font-size:.63rem;color:#66757e;font-weight:700;margin:-2px 0 4px}

  .opts{display:flex;flex-wrap:wrap;gap:7px}
  .opt{border:1.5px solid var(--line-strong);background:#fff;border-radius:8px;padding:8px 13px;font-size:.86rem;font-weight:600;cursor:pointer;color:var(--ink-soft);font-family:inherit;transition:.13s}
  .opt:hover{border-color:#b9c6cd}
  .opt[aria-checked="true"]{border-color:var(--blue-dark);background:#eaf3fc;color:#2a68af;box-shadow:0 0 0 2px rgba(61,139,224,.13)}

  /* dropdown, for option lists too long to sit as buttons */
  .fsel{width:100%;appearance:none;border:1.5px solid var(--line-strong);border-radius:7px;background:#fff;
    padding:10px 34px 10px 12px;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b74' stroke-width='2.4'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
  .fsel:focus-visible{outline:2px solid var(--blue-dark);outline-offset:1px}
  .fsel:focus{border-color:var(--blue-dark);box-shadow:0 0 0 2px rgba(47,116,194,.35)}

  .ftxt{width:100%;border:1.5px solid var(--line-strong);border-radius:7px;padding:10px 12px;font-family:inherit;font-size:.9rem;color:var(--ink)}
  .ftxt:focus{border-color:var(--blue-dark);box-shadow:0 0 0 2px rgba(47,116,194,.35)}

  /* segmented toggle, for a true either/or like flooring's input mode */
  .ftog{display:flex;border:1.5px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--mist)}
  .ftog button{flex:1;border:0;background:transparent;padding:9px 8px;font-family:inherit;font-size:.83rem;font-weight:700;color:var(--grey);cursor:pointer;transition:.13s}
  .ftog button[aria-pressed="true"]{background:#fff;color:var(--blue-dark);box-shadow:0 1px 4px rgba(30,37,41,.12)}

  .dimw{display:flex;align-items:stretch;border:1.5px solid var(--line-strong);border-radius:7px;background:#fff;overflow:hidden}
  .dimw input{border:0;outline:0;padding:9px 10px;width:100%;min-width:0;font-family:inherit;font-size:.94rem;font-weight:700;color:var(--ink)}
  .dimw select{min-width:0}
  /* The outline is stripped above, so it has to be given back. Without this the
     hero calculator has no visible focus at all for a keyboard user. */
  .dimw:focus-within{border-color:var(--blue);box-shadow:0 0 0 2px rgba(61,139,224,.13)}
  .dimw input:focus-visible,.dimw select:focus-visible{outline:2px solid var(--blue-dark);outline-offset:-2px}
  .sw:focus-visible,.opt:focus-visible,.ftog button:focus-visible,
  .btn:focus-visible,.btn2:focus-visible{outline:3px solid var(--blue-dark);outline-offset:2px}
  .dimw span{padding:0 9px;font-size:.75rem;color:var(--grey);font-weight:700;background:var(--mist);display:flex;align-items:center}
  /* whole number + fraction, the way a cabinet or blind is actually ordered */
  .dimw select{border:0;outline:0;border-left:1px solid var(--line);background:#fff;padding:0 22px 0 8px;
    font-family:inherit;font-size:.86rem;font-weight:700;color:var(--ink);cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b74' stroke-width='2.6'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat;background-position:right 5px center;background-size:12px}
  .rulewarn{margin:8px 0 0;background:#fdecef;border:1px solid #f3c2ca;color:#a3283c;border-radius:7px;padding:8px 11px;font-size:.77rem;font-weight:600}

  /* dimension pairs sit side by side, the way every real configurator asks for them.
     The row needs its own bottom margin: the .fg children have theirs zeroed, so
     without it the next field sits flush against the pair. */
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}
  .frow .fg{margin-bottom:0}


  /* ---- Swatches ----
     Materials and colours are shown as images that carry their own price,
     because nobody picks a finish out of a text list. Every fill below is CSS
     or an inline SVG, so the whole set costs no requests and stays sharp. */
  .sws{display:flex;flex-wrap:wrap;gap:8px}
  .sw{border:1.5px solid var(--line-strong);background:#fff;border-radius:9px;padding:6px 6px 5px;cursor:pointer;
    font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;transition:.13s}
  .sw:hover{border-color:#b9c6cd}
  .sw[aria-checked="true"]{border-color:var(--violet);background:#f5f2ff;box-shadow:0 0 0 2px rgba(124,92,224,.16)}
  .swi{width:100%;height:36px;border-radius:5px;border:1px solid rgba(0,0,0,.11)}
  .swl{font-size:.61rem;font-weight:700;color:var(--ink-soft);line-height:1.15;text-align:center}

  /* sticker materials and finishes */
  .m-vinyl{background:linear-gradient(140deg,#fdfdfc,#e9e9e6)}
  .m-holo{background:linear-gradient(115deg,#f9a8d4,#a5b4fc,#67e8f9,#bbf7d0,#fde68a)}
  .m-pixie{background:#efe7fb;background-image:radial-gradient(#fff 1px,transparent 1.4px),radial-gradient(#c4b5fd 1px,transparent 1.4px);background-size:7px 7px,11px 11px;background-position:0 0,4px 5px}
  .m-clear{background-image:conic-gradient(#dfe6ea 25%,#fff 0 50%,#dfe6ea 0 75%,#fff 0);background-size:10px 10px}
  .m-chrome{background:linear-gradient(115deg,#eef2f5,#98a3ac,#f4f7f9,#8b97a1,#dde4e9)}
  .m-prism{background:linear-gradient(115deg,#c084fc,#60a5fa,#34d399,#fbbf24,#f87171)}
  .m-gglit{background:#d9b036;background-image:radial-gradient(#fff6cf 1.1px,transparent 1.5px),radial-gradient(#a8791a 1px,transparent 1.4px);background-size:8px 8px,13px 13px;background-position:0 0,5px 6px}
  .m-gmirr{background:linear-gradient(115deg,#f7e3a4,#b8860b,#fbf0c4,#c9971f)}
  .f-gloss{background:linear-gradient(115deg,#fff,#dbe3e8 42%,#fff 52%,#cbd5da)}
  .f-matte{background:#e7e4de}
  .f-ice{background:#eef4f7;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23a9c2ce' stroke-width='.9'><path d='M0 12 12 18 22 8 40 16M0 30 14 26 26 34 40 28M12 0 18 12 10 22 16 40M30 0 26 14 34 24 28 40'/></g></svg>")}

  /* wallpaper designs. Drawn at 44px and tiled, so the motif still reads as a
     pattern inside a 36px swatch instead of collapsing into texture. */
  .w-pattern{background-color:#1d4a48;background-size:44px 44px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='none' stroke='%23c9a24e' stroke-width='1.3' stroke-linecap='round'><path d='M22 5c8 6 8 15 0 21-8-6-8-15 0-21Z'/><path d='M22 26c5 4 5 10 0 13-5-3-5-9 0-13Z'/></g><g fill='%2382b394'><ellipse cx='10' cy='15' rx='3' ry='5.6' transform='rotate(-38 10 15)'/><ellipse cx='34' cy='15' rx='3' ry='5.6' transform='rotate(38 34 15)'/><ellipse cx='13' cy='33' rx='2.4' ry='4.4' transform='rotate(-30 13 33)'/><ellipse cx='31' cy='33' rx='2.4' ry='4.4' transform='rotate(30 31 33)'/></g><circle cx='22' cy='13' r='2.6' fill='%23eccdc6'/><circle cx='22' cy='13' r='1.1' fill='%23d9a84e'/></svg>")}
  .w-birds{background-color:#f0dcd6;background-size:44px 44px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><path d='M11 14c3-4 7-4 9-1 2-4 6-2 6 1 0 3-4 6-8 8-3-2-7-5-7-8Z' fill='%234a4038'/><path d='M20 21c3 2 5 5 4 8-3 1-6-2-7-5Z' fill='%234a4038' opacity='.5'/><path d='M31 30c2-2.6 4.6-2.6 6-.7 1.4-2.6 4-1.3 4 .7 0 2-2.6 4-5.3 5.3-2-1.3-4.7-3.3-4.7-5.3Z' fill='%23a8603f'/><g fill='none' stroke='%237d9c72' stroke-width='1.2' stroke-linecap='round'><path d='M0 38q8-5 16-2'/><path d='M28 8q8-4 16 0'/></g></svg>")}
  .w-fish{background-color:#1d4b52;background-size:44px 44px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><path d='M8 12c3-5 12-5 15 0-3 5-12 5-15 0Z' fill='%23e8d5b0'/><path d='M8 12 1 8v8Z' fill='%23e8d5b0'/><circle cx='18' cy='11' r='1.2' fill='%231d4b52'/><path d='M24 32c3-5 12-5 15 0-3 5-12 5-15 0Z' fill='%23d4796a'/><path d='M24 32l-7-4v8Z' fill='%23d4796a'/><circle cx='34' cy='31' r='1.2' fill='%231d4b52'/><g fill='none' stroke='%234f8d8a' stroke-width='1.1' stroke-linecap='round'><path d='M30 4q4 6 0 12'/><path d='M6 26q4 6 0 12'/></g></svg>")}
  .w-trees{background-color:#dfe6d8;background-size:44px 44px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='%233d5c41'><path d='M11 4l5 9H6Z'/><path d='M11 10l6.5 11h-13Z'/><rect x='9.9' y='20' width='2.2' height='6'/></g><g fill='%232f4a34'><path d='M31 16l4 7h-8Z'/><path d='M31 21l5.5 9h-11Z'/><rect x='30' y='29' width='2' height='5'/></g><g fill='%236f8f63'><path d='M22 30l3 5h-6Z'/><rect x='21.2' y='34' width='1.6' height='4'/></g></svg>")}

  /* blinds: inside mount sits within the window opening, outside mount covers it */
  .mt-in{background-color:#f2f5f7;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='5' y='3' width='54' height='36' fill='%23fff' stroke='%236f7e88' stroke-width='2.5'/><rect x='10' y='8' width='44' height='19' fill='%23b9c6cd' stroke='%236f7e88' stroke-width='1'/><g stroke='%238fa0aa' stroke-width='.9'><path d='M10 13h44M10 18h44M10 23h44'/></g><path d='M32 27v5' stroke='%236f7e88' stroke-width='1.4'/></svg>")}
  .mt-out{background-color:#f2f5f7;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='12' y='8' width='40' height='31' fill='%23fff' stroke='%236f7e88' stroke-width='2.5'/><rect x='4' y='3' width='56' height='22' fill='%23b9c6cd' stroke='%236f7e88' stroke-width='1'/><g stroke='%238fa0aa' stroke-width='.9'><path d='M4 9h56M4 14h56M4 19h56'/></g><path d='M32 25v5' stroke='%236f7e88' stroke-width='1.4'/></svg>")}

  /* yard signs: each size drawn to its real proportions, materials as substrate */
  .ys-12{background-color:#f4f7f9;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='24' y='13' width='16' height='24' fill='%233D8BE0' rx='1'/><path d='M32 37v4' stroke='%236f7e88' stroke-width='2'/></svg>")}
  .ys-18{background-color:#f4f7f9;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='20' y='7' width='24' height='30' fill='%233D8BE0' rx='1'/><path d='M32 37v4' stroke='%236f7e88' stroke-width='2'/></svg>")}
  .ys-24{background-color:#f4f7f9;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='14' y='3' width='36' height='34' fill='%233D8BE0' rx='1'/><path d='M32 37v4' stroke='%236f7e88' stroke-width='2'/></svg>")}
  .ys-custom{background-color:#f4f7f9;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='18' y='7' width='28' height='30' fill='none' stroke='%233D8BE0' stroke-width='2' stroke-dasharray='4 3' rx='1'/><path d='M26 22h12M32 16v12' stroke='%233D8BE0' stroke-width='2' stroke-linecap='round'/></svg>")}
  .ys-corr{background-color:#eef1f3;background-image:repeating-linear-gradient(90deg,#e6ebee 0 4px,#ccd5da 4px 5px)}
  .ys-pvc{background:linear-gradient(140deg,#fdfdfd,#e4e9eb)}
  .ys-alum{background:linear-gradient(115deg,#e6eaee,#a9b4bc,#f0f3f5,#9fabb3)}
  .ys-single{background-color:#f4f7f9;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='22' y='8' width='20' height='26' fill='%233D8BE0' rx='1'/><path d='M46 21h9M50 17l5 4-5 4' stroke='%236f7e88' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
  .ys-double{background-color:#f4f7f9;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='22' y='8' width='20' height='26' fill='%233D8BE0' rx='1'/><path d='M46 21h9M50 17l5 4-5 4' stroke='%236f7e88' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M18 21H9M14 17l-5 4 5 4' stroke='%236f7e88' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
  .ys-doublex{background-color:#f4f7f9;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><rect x='22' y='8' width='20' height='26' fill='%233D8BE0' rx='1'/><rect x='22' y='8' width='10' height='26' fill='%2317B39B' rx='1'/><path d='M46 21h9M50 17l5 4-5 4' stroke='%236f7e88' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M18 21H9M14 17l-5 4 5 4' stroke='%236f7e88' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.p-smooth{background:linear-gradient(140deg,#fdfdfc,#eceae5)}
  .p-peel{background:linear-gradient(140deg,#fff,#e6eef2 60%,#f6f8f9)}
  .p-comm{background:linear-gradient(140deg,#e2e7ea,#c6ced3)}
  .p-tex{background:#efece6;background-image:radial-gradient(rgba(0,0,0,.17) .9px,transparent 1.1px);background-size:4px 4px}

  /* blind fabrics, with a woven texture over the colour */
  .b-white{background:#f7f5f1}.b-ivory{background:#f2e7d2}.b-silver{background:#c6cbd0}.b-ecru{background:#e6d9c2}
  .b-white,.b-ivory,.b-silver,.b-ecru{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}

  /* flooring */
  .fl-rustic{background:repeating-linear-gradient(90deg,#c08a56 0 15px,#b47f4d 15px 16px);background-image:repeating-linear-gradient(90deg,#c08a56 0 15px,#a8743f 15px 16px),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 9px,rgba(0,0,0,.12) 9px 10px)}
  .fl-smoked{background-image:repeating-linear-gradient(90deg,#8a6444 0 15px,#75523a 15px 16px),repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 9px,rgba(0,0,0,.14) 9px 10px)}
  .fl-walnut{background-image:repeating-linear-gradient(90deg,#5f4330 0 19px,#4d3626 19px 20px),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 11px,rgba(0,0,0,.13) 11px 12px)}
  .fl-herring{background:#b98a5c;background-image:repeating-linear-gradient(45deg,#c49469 0 7px,#a97a4c 7px 8px),repeating-linear-gradient(-45deg,rgba(0,0,0,.09) 0 7px,transparent 7px 14px)}

  /* cabinet wood species */
  .wd-paint{background:linear-gradient(140deg,#efece6,#ddd8cf)}
  .wd-maple{background-image:repeating-linear-gradient(0deg,#e8d9bd 0 6px,#dfceae 6px 7px)}
  .wd-oak{background-image:repeating-linear-gradient(0deg,#d3a874 0 6px,#c59a64 6px 7px)}
  .wd-cherry{background-image:repeating-linear-gradient(0deg,#a45f3f 0 6px,#93523a 6px 7px)}
  .wd-walnut{background-image:repeating-linear-gradient(0deg,#5d4030 0 6px,#4c3325 6px 7px)}

  /* linen fabrics and colours */
  .fb-poly{background:#eceef0;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.04) 0 2px,transparent 2px 4px)}
  .fb-blend{background:#e6e8e4;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px)}
  .fb-spandex{background:linear-gradient(140deg,#dfe3e7,#b9c1c8)}
  .fb-satin{background:linear-gradient(115deg,#fdfdfd,#c9ced4 40%,#fff 55%,#d5dade)}
  .fb-linen{background:#e4dcc9;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px)}
  .fb-vinyl{background:linear-gradient(140deg,#e9ecee,#cfd5d9);background-image:radial-gradient(rgba(0,0,0,.07) 1px,transparent 1.3px);background-size:5px 5px}
  .c-white{background:#fbfbf9}.c-black{background:#22262a}.c-navy{background:#1e3a5f}
  .c-burg{background:#6b2436}.c-forest{background:#22543d}
  .c-custom{background:conic-gradient(#f87171,#fbbf24,#34d399,#60a5fa,#c084fc,#f87171)}

  /* screen door frames and mesh */
  .fr-mill{background:linear-gradient(140deg,#dfe4e8,#aab3ba)}
  .fr-white{background:#f6f7f7}.fr-bronze{background:#6b4f36}.fr-black{background:#26292c}
  .fr-ral{background:conic-gradient(#60a5fa,#34d399,#fbbf24,#f87171,#c084fc,#60a5fa)}
  .ms-fibre{background:#c9ccc6;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 1px,transparent 1px 4px)}
  .ms-alum{background:#c2c7cb;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 1px,transparent 1px 4px)}
  .ms-pet{background:#9aa0a2;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.42) 0 2px,transparent 2px 6px),repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0 2px,transparent 2px 6px)}
  .ms-solar{background:#4b5157;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 2px,transparent 2px 5px),repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 2px,transparent 2px 5px)}
  .ms-fine{background:#cdd1cb;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 2px),repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 1px,transparent 1px 2px)}

  /* ---- Price summary ----
     Its own card, separated from the configurator, the way the app renders it.
     As a flush strip on the bottom of the browser frame it read as a footer. */
  .psum{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:0 10px 30px rgba(30,37,41,.10);overflow:hidden}
  .psumhead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 20px;
    border-bottom:1px solid var(--line);font-size:.72rem;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--grey);background:linear-gradient(180deg,#fbfcfd,#f4f7f9)}
  .psumhead b{color:var(--teal-dark);letter-spacing:.04em}
  .psumbody{padding:16px 20px 6px}
  .trow{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--ink-soft);padding:6px 0}
  .trow + .trow{border-top:1px dashed var(--line)}
  .trow span:last-child{font-weight:700;color:var(--ink);text-align:right}
  .ptot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 0 0;
    padding:14px 20px;border-top:2px solid var(--ink);background:#f7fbff}
  .ptot .lab{font-weight:800;font-size:1.02rem;color:var(--ink)}
  .ptot .val{font-size:1.9rem;font-weight:800;color:var(--blue);line-height:1}
  .minnote{font-size:.73rem;color:#0b7565;font-weight:700;padding:0 20px 14px;margin:0;background:#f7fbff}

  /* Category card swatches. These were shared with a preview box in the hero
     calculator; that box is gone, but the cards in "Find Your Product Type"
     still use them, so the skins stay. */
  .sk-stickers{background:#fff;border-radius:12px;box-shadow:inset 0 0 0 3px #dfe6ea}
  .sk-wallpaper{background:#1d4a48;background-image:radial-gradient(rgba(130,179,148,.75) 2.5px,transparent 3px);background-size:26px 26px}
  .sk-blinds{background:repeating-linear-gradient(180deg,#e7e2d8 0 7px,#d9d3c7 7px 8px)}
  .sk-flooring{background:repeating-linear-gradient(90deg,#b98a5c 0 22px,#a87b50 22px 23px),repeating-linear-gradient(180deg,rgba(0,0,0,.07) 0 30px,rgba(0,0,0,.14) 30px 31px)}
  .sk-signs{background:#f7f9fa;background-image:linear-gradient(135deg,#3D8BE0 25%,transparent 25%,transparent 75%,#3D8BE0 75%);background-size:38px 38px;opacity:.9}
  .sk-print{background:#fff;background-image:linear-gradient(180deg,#e9eef1 0 6px,transparent 6px);background-size:100% 15px}

  .total{background:#f2f7fc;border-top:1px solid var(--line);padding:16px 22px}

  /* ---- three walls ---- */
  /* ---- Setup path ----
     Most installs come from merchants building a store, not switching apps, so
     this sits directly under the hero. Numbered because the promise is that it
     is three steps and not a project. */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
  .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;box-shadow:0 4px 18px rgba(30,37,41,.05)}
  .stepn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
    background:var(--teal);color:#fff;font-weight:800;font-size:.85rem;margin-bottom:13px}
  .step h3{font-size:1.05rem;margin-bottom:.4rem}
  .step p{margin:0;color:var(--grey);font-size:.93rem}
  @media (max-width:900px){ .steps{grid-template-columns:1fr} }

  .devnote{margin-top:20px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--violet);
    border-radius:12px;padding:20px 24px}
  .devnote b{display:block;margin-bottom:5px;font-size:1rem}
  .devnote p{margin:0;color:var(--grey);font-size:.93rem}

  /* lets the wrong reader skip a section instead of bouncing off it */
  .forwho{display:inline-block;background:#eaf3fc;color:var(--blue-dark);border-radius:999px;
    padding:6px 16px;font-size:.78rem;font-weight:700;margin-bottom:14px}

  /* four cards, so 2x2 rather than a cramped single row */
  .wallgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
  .wallcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;box-shadow:0 4px 18px rgba(30,37,41,.05)}
  .wallnum{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#eaf3fc;color:#2a68af;font-weight:800;font-size:1rem;margin-bottom:13px}
  .wallcard h3{font-size:1.12rem;margin-bottom:.45rem}
  .wallcard p{margin:0;color:var(--grey);font-size:.96rem}
  @media (max-width:900px){ .wallgrid{grid-template-columns:1fr} }

  /* ---- Category comparison ----
     Deliberately compares app CATEGORIES, never a named competitor. The two
     left columns describe what a typical app in each category does, which is a
     positioning claim. Naming a rival would turn it into a factual claim about
     someone else's product that we would then have to keep true as they ship. */
  .cmp{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:18px;margin-top:42px;align-items:start}
  .cmpcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px 26px;box-shadow:0 6px 22px rgba(0,0,0,.22)}
  .cmpcard h3{font-size:1.05rem;margin:0 0 4px;color:var(--ink)}
  .cmpcard .cmpsub{display:block;font-size:.74rem;font-weight:700;color:var(--grey);letter-spacing:.03em;margin-bottom:13px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
  .cmpcard ul{list-style:none;margin:0;padding:0}
  .cmpcard li{font-size:.9rem;color:var(--ink-soft);padding:8px 0;border-bottom:1px solid var(--line)}
  .cmpcard li:last-child{border-bottom:0}
  .cmpcard.best{background:#141a1d;border:2px solid var(--yellow);box-shadow:0 0 0 4px rgba(255,201,60,.16),0 18px 44px rgba(0,0,0,.4)}
  .cmpcard.best h3{color:#fff;font-size:1.28rem;letter-spacing:-.01em}
  .cmpcard.best .cmpsub{color:var(--yellow);border-bottom-color:var(--yellow)}
  .cmpcard.best li{color:#dbe4ea;border-bottom-color:#2c353b}
  .cmpcard.best li.key{color:var(--yellow);font-weight:700}
  .cmpflag{display:inline-block;background:var(--yellow);color:#1E2529;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:12px}
  .cmpline{margin:38px auto 0;max-width:820px;text-align:center;background:var(--yellow);color:#1E2529;font-weight:800;font-size:clamp(1rem,2vw,1.2rem);border-radius:12px;padding:16px 24px;line-height:1.4}
  .cmpnote{text-align:center;font-size:.8rem;color:#8d9aa3;max-width:660px;margin:18px auto 0;line-height:1.5}

  /* A checklist someone mid-search can actually use, including against us.
     Most useful thing on the page for a merchant three apps deep. */
  .dq{max-width:860px;margin:34px auto 0;background:#141a1d;border:1px solid #2c353b;border-radius:14px;padding:28px 32px}
  .dq h3{font-size:1.14rem;color:#fff;margin-bottom:.35rem}
  .dqsub{font-size:.88rem;color:#a9b6bf;margin:0 0 18px}
  .dq ol{margin:0;padding-left:22px;color:#cbd5da}
  .dq li{font-size:.9rem;line-height:1.55;padding:8px 0;border-bottom:1px solid #2c353b}
  .dq li:last-child{border-bottom:0}
  .dq li b{color:var(--yellow);font-weight:700}
  .dq li::marker{color:var(--yellow);font-weight:800}
  .dqfoot{margin:16px 0 0;font-size:.85rem;font-weight:700;color:var(--teal)}
  @media (max-width:900px){ .cmp{grid-template-columns:1fr} }

  /* ---- The invisible losses ----
     Nine losses that never appear in a report, each paired with the capability
     that closes it. Three columns so all nine are visible as a block: the
     length of the list is part of the argument. */
  .inv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
  .invcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px 18px;
    box-shadow:0 4px 16px rgba(30,37,41,.05);display:flex;flex-direction:column}
  .invcard h3{font-size:1rem;margin:0 0 .45rem;line-height:1.25}
  .invcard p{font-size:.9rem;color:var(--grey);margin:0 0 14px;line-height:1.55;flex:1}
  .invfix{display:block;font-size:.83rem;font-weight:700;color:#0b7565;
    border-top:1px solid var(--line);padding-top:11px}
  .invnote{text-align:center;max-width:660px;margin:34px auto 0;font-size:1.02rem;font-weight:600;color:var(--ink)}
  @media (max-width:980px){ .inv{grid-template-columns:1fr 1fr} }
  @media (max-width:640px){ .inv{grid-template-columns:1fr} }

  /* ---- category routing grid ---- */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
  .cat{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px 20px;box-shadow:0 4px 16px rgba(30,37,41,.05);transition:transform .15s,box-shadow .15s,border-color .15s}
  .cat:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,37,41,.11);border-color:#cfdae0}
  .catsw{width:100%;height:74px;border-radius:9px;margin-bottom:14px;border:1px solid rgba(0,0,0,.08)}
  .cat h3{font-size:1.06rem;margin-bottom:.25rem}
  .cat p{margin:0 0 12px;color:var(--grey);font-size:.88rem;line-height:1.5}
  .catgo{font-size:.8rem;font-weight:800;color:var(--blue-dark)}
  .catgo.demo{color:var(--teal-dark)}
  .cattag{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:9px}
  .cattag.full{background:#eaf3fc;color:var(--blue-dark)}
  .cattag.live{background:#e1f5f0;color:var(--teal-dark)}
  @media (max-width:900px){ .cats{grid-template-columns:1fr 1fr} }
  @media (max-width:620px){ .cats{grid-template-columns:1fr} }

  /* ---- universal features, each linked to a working demo ---- */
  .ugrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
  .ucard{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;transition:.15s}
  .ucard:hover{border-color:var(--teal);box-shadow:0 8px 24px rgba(30,37,41,.08)}
  .ucard b{display:block;font-size:1rem;margin-bottom:4px}
  .ucard span{display:block;color:var(--grey);font-size:.92rem;line-height:1.5;margin-bottom:10px}
  .ulink{font-size:.78rem;font-weight:800;color:var(--teal-dark)}
  @media (max-width:820px){ .ugrid{grid-template-columns:1fr} }

  .qblock{border-left:4px solid var(--teal);padding:5px 0 5px 21px;margin:1.5rem 0;font-size:1.13rem;font-weight:600}
  .fgroup{margin-bottom:52px}
  .fgroup>h3{display:inline-block;font-size:1.4rem;font-weight:800;margin-bottom:1.3rem;border-bottom:3px solid var(--teal);padding-bottom:5px}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px 38px}
  .feat{position:relative;padding-left:29px}
  .feat::before{content:"✓";position:absolute;left:0;top:1px;color:var(--teal);font-weight:800}
  .feat b{display:block;margin-bottom:2px}
  .feat span{color:var(--grey);font-size:.96rem}
  .subh{border-bottom:3px solid var(--teal);display:inline-block;padding-bottom:5px;font-size:1.4rem;font-weight:800}
  .splitfig{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:52px}

  .pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
  .pcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;text-align:center}
  .picon{width:44px;height:44px;margin:0 auto 11px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#eaf3fc}
  .pcard b{display:block;font-size:.92rem;margin-bottom:3px}
  .pcard small{color:var(--grey);font-size:.79rem;line-height:1.4;display:block}
  @media (max-width:900px){ .pipe{grid-template-columns:1fr 1fr} }

  /* ---- reorder ---- */
  .rocard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(30,37,41,.09)}
  .rohead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;background:var(--mist);border-bottom:1px solid var(--line);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--grey)}
  .robody{padding:15px 18px 4px}
  .rotitle{display:block;font-size:1rem;font-weight:800;margin-bottom:9px}
  .roline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.8rem;color:var(--grey);padding:6px 0;border-top:1px solid var(--line)}
  .roline b{font-weight:700;color:var(--ink);text-align:right}
  .roline.file b{color:var(--teal-dark)}
  .rofoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px 15px;border-top:1px solid var(--line);margin-top:9px;background:#f7fbff}
  .rofoot span.rototal{font-size:1.15rem;font-weight:800;color:var(--ink)}
  .robtn{background:var(--blue-dark);color:#fff;border-radius:8px;padding:10px 24px;font-size:.88rem;font-weight:700}
  .rolist{display:grid;grid-template-columns:1fr;gap:18px;margin-top:1.4rem}

  .demo{background:linear-gradient(135deg,#eafaf6,#f2f8ff);border:1px solid #c8e9e0;border-radius:16px;padding:30px 32px;display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .demo h3{margin:0 0 .3rem;font-size:1.3rem}
  .demo p{margin:0;color:var(--grey);font-size:.97rem;max-width:56ch}
  .demo .btn{white-space:nowrap}
  .demopill{display:inline-block;background:#0b7565;color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:11px}

  .supportband{background:linear-gradient(135deg,#0b7565 0%,#08594d 100%);color:#fff;padding:clamp(46px,6vw,72px) 0}
  .supportband h2{color:#fff;margin-bottom:.6rem}
  .supportband > .wrap > div > p{color:#dbf5ef;margin:0}
  .sbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
  .sbitem{background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:20px 22px}
  .sbitem b{display:block;font-size:1.02rem;margin-bottom:4px}
  .sbitem span{color:#dbf5ef;font-size:.92rem;line-height:1.5;display:block}
  @media (max-width:900px){ .sbgrid{grid-template-columns:1fr} }

  .obj{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:15px}
  .obj h3{margin-bottom:.35rem;font-size:1.06rem}
  .obj p{margin:0;color:var(--grey)}
  .pricecard{background:#fff;border:1px solid var(--line);border-top:5px solid var(--teal);border-radius:14px;padding:36px 32px;max-width:640px;margin:0 auto;box-shadow:0 8px 30px rgba(30,37,41,.07)}
  .pricecard ul{list-style:none;padding:0;margin:0 0 26px}
  .pricecard li{position:relative;padding-left:29px;margin-bottom:11px;color:var(--ink-soft);font-size:.97rem}
  .pricecard li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
  .price{font-size:2.9rem;font-weight:800;line-height:1;margin:0}
  .price span{font-size:1rem;font-weight:600;color:var(--grey)}
  .badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
  .badge{background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
  .hl{background:linear-gradient(180deg,transparent 62%,var(--yellow) 62%);padding:0 2px}
  .finalines{text-align:center;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;line-height:2;margin:0 0 1.8rem;color:#e8eef2}
  .faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px 44px}
  .faq h3{font-size:1.02rem;margin-bottom:.3rem}
  .faq p{color:var(--grey);font-size:.96rem;margin:0}
  footer{background:var(--ink);color:#8d9aa3;padding:38px 0 90px;font-size:.89rem;border-top:1px solid #2c353b}
  footer a{color:#cfe0f2}
  .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

  @media (max-width:900px){ .calc-body{max-height:none} }
  @media (max-width:540px){
    .frow{grid-template-columns:1fr;gap:0;margin-bottom:0}
    .frow .fg{margin-bottom:15px}
    .sw{width:64px;padding:5px 5px 4px}
    .swi{height:30px}
    .calc-body{padding:16px 14px}
    .psumbody{padding:14px 15px 5px}
    .ptot,.minnote{padding-left:15px;padding-right:15px}
    .mode{padding:8px 12px;font-size:.81rem}
    .modes{gap:6px}
    /* nowrap on this button overflows the document below about 360px */
    .demo .btn{white-space:normal}
    .swl{font-size:.62rem}
    .foot span{overflow-wrap:anywhere}
  }

  .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(30,37,41,.97);backdrop-filter:blur(8px);border-top:1px solid #2c353b;transform:translateY(110%);padding:12px 0;
    /* hidden means hidden: translated off-screen it was still in the tab order */
    visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
  .stickybar.on{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
  .sbin{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .sbtext{color:#fff;font-weight:700;font-size:.97rem}
  .sbtext small{display:block;color:#a9b6bf;font-weight:500;font-size:.8rem;margin-top:1px}
  .sbbtns{display:flex;gap:10px;flex-wrap:wrap}
  .stickybar .btn{padding:12px 24px;font-size:.95rem;box-shadow:none}
  .stickybar .btn2{padding:11px 20px;font-size:.95rem;background:transparent;color:#fff;border-color:#707d87}
  @media (max-width:760px){
    .sbtext{display:none}
    .sbin{justify-content:center}
    .sbbtns{width:100%}
    .stickybar .btn,.stickybar .btn2{flex:1;text-align:center;padding:12px 10px}
  }

  @media (max-width:900px){
    .herogrid,.fgrid,.faqgrid,.splitfig{grid-template-columns:1fr}
    .herogrid{gap:38px}
    .demo{flex-direction:column;align-items:flex-start}
    body{font-size:16.5px}
  }