/* Friendly Technologies design system - Brand OS v5.2.2 tokens */
  /* ===== Friendly Brand OS v5.2.2 tokens ===== */
  :root{
    --tangerine:#F37921; --tang-deep:#A84E10; --tang-title:#D8631A;
    --tang-ink:#5A300E;  --tang-tint:#FDF0E4;
    --dark:#2B2B2B; --dark-tile:#38383E; --dark-alt:#4A4A50; --dark-hair:#46464C;
    --on-dark-1:#E4E4E8; --on-dark-2:#B4B4BA; --on-dark-3:#9C9CA4;
    --body:#5A595F; --gray-600:#6D6C73; --gray-300:#D2D2D2; --gray-200:#E2E1E1;
    --gray-100:#F0F0F0; --white:#FFFFFF;
    --shadow:0 3px 9px rgba(26,26,26,.12);
    --r-card:18px; --r-pill:999px;
    --font:'Roboto',Arial,Helvetica,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
  body{font-family:var(--font);background:var(--white);color:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:var(--tang-deep);text-decoration:none}
  a:focus-visible,button:focus-visible{outline:3px solid var(--tangerine);outline-offset:2px}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  .eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
  h2.sec{font-size:clamp(26px,3vw,34px);font-weight:700;color:var(--tang-title);margin:6px 0 18px;line-height:1.2}
  h2.sec::after{content:"";display:block;width:46px;height:4px;background:var(--tangerine);border-radius:2px;margin-top:14px}
  .sec-sub{max-width:70ch;font-size:16.5px}
  section{padding:72px 0}
  .btn{display:inline-block;font-weight:500;font-size:15px;border-radius:var(--r-pill);padding:12px 28px;border:0;cursor:pointer;transition:background .15s ease}
  .btn.primary{background:var(--tangerine);color:var(--dark)}
  .btn.primary:hover{background:#E06E1B}
  .btn.line-dark{border:1.5px solid var(--dark-hair);color:var(--on-dark-1)}
  .btn.line-dark:hover{border-color:var(--tangerine);color:var(--tangerine)}
  .btn.line-light{border:1.5px solid var(--gray-300);color:var(--body)}
  .btn.line-light:hover{border-color:var(--tang-deep);color:var(--tang-deep)}

  /* ===== Nav ===== */
  .topbar{position:sticky;top:0;z-index:50;background:var(--dark);border-bottom:1px solid var(--dark-hair)}
  .nav{display:flex;align-items:center;gap:30px;padding:14px 0}
  .nav .logo img{height:40px;width:auto}
  .nav ul{list-style:none;display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
  .nav a.link{color:var(--on-dark-2);font-size:14.5px;font-weight:500}
  .nav a.link:hover{color:var(--tangerine)}
  .nav .btn{padding:9px 22px;font-size:14px}
  @media(max-width:820px){.nav ul{display:none}}
  .nav li.has-sub{position:relative}
  .nav li.has-sub>span.link{color:var(--on-dark-2);font-size:14.5px;font-weight:500;cursor:default}
  .nav li.has-sub>span.link::after{content:" \25BE";font-size:11px}
  .nav li.has-sub:hover>span.link,.nav li.has-sub:focus-within>span.link{color:var(--tangerine)}
  .nav .submenu{display:none;position:absolute;top:100%;left:0;margin-top:8px;background:var(--dark-tile);border:1px solid var(--dark-hair);border-radius:10px;padding:8px;min-width:200px;box-shadow:var(--shadow);z-index:60;list-style:none}
  .nav li.has-sub:hover .submenu,.nav li.has-sub:focus-within .submenu{display:block}
  .nav .submenu li{margin:0}
  .nav .submenu a{display:block;padding:8px 12px;border-radius:6px;white-space:nowrap;color:var(--on-dark-2);font-size:14px;font-weight:500}
  .nav .submenu a:hover{background:var(--dark-alt);color:var(--tangerine)}

  /* ===== Hero ===== */
  .hero{background:var(--dark);color:var(--on-dark-1);padding:84px 0 0;overflow:hidden}
  .hero .grid2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
  @media(max-width:900px){.hero .grid2{grid-template-columns:1fr}}
  .hero .eyebrow{color:var(--tangerine)}
  .hero h1{color:var(--white);font-weight:900;font-size:clamp(34px,5vw,58px);line-height:1.08;margin:14px 0 20px;max-width:16ch}
  .hero h1 em{font-style:normal;color:var(--tangerine)}
  .hero p.lead{color:var(--on-dark-2);font-size:18px;max-width:56ch}
  .hero .cta-row{display:flex;gap:16px;margin:32px 0 0;flex-wrap:wrap}
  .hero .mesh{justify-self:center;max-width:100%}
  .hero .mesh svg{max-width:100%;height:auto}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--dark-hair);border-top:1px solid var(--dark-hair);margin-top:64px}
  .stats div{background:var(--dark);padding:26px 24px}
  .stats strong{display:block;color:var(--tangerine);font-size:30px;font-weight:700;line-height:1.1}
  .stats span{color:var(--on-dark-3);font-size:14px}

  /* ===== ICP tabs (CSS only) ===== */
  .icp{background:var(--white)}
  .icp input{position:absolute;opacity:0;pointer-events:none}
  .icp .tabs{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}
  .icp label{border:1.5px solid var(--gray-300);border-radius:var(--r-pill);padding:10px 22px;font-weight:500;font-size:15px;color:var(--gray-600);cursor:pointer}
  .icp label:hover{border-color:var(--tang-deep);color:var(--tang-deep)}
  .icp .panel{display:none;margin-top:30px;background:var(--gray-100);border-radius:var(--r-card);padding:34px 36px}
  #icp-a:checked~.tabs label[for=icp-a],#icp-b:checked~.tabs label[for=icp-b],
  #icp-c:checked~.tabs label[for=icp-c],#icp-d:checked~.tabs label[for=icp-d]{
    background:var(--tangerine);border-color:var(--tangerine);color:var(--dark)}
  #icp-a:checked~.panel.pa,#icp-b:checked~.panel.pb,#icp-c:checked~.panel.pc,#icp-d:checked~.panel.pd{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:36px}
  @media(max-width:820px){#icp-a:checked~.panel.pa,#icp-b:checked~.panel.pb,#icp-c:checked~.panel.pc,#icp-d:checked~.panel.pd{grid-template-columns:1fr}}
  .panel h3{color:var(--dark);font-size:22px;margin-bottom:10px}
  .panel .aside{background:var(--white);border:0.75px solid var(--gray-200);border-radius:var(--r-card);padding:24px 26px;box-shadow:var(--shadow)}
  .panel .aside h4{color:var(--tang-deep);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
  .ticks{list-style:none;margin-top:14px}
  .ticks li{padding-left:26px;position:relative;margin-bottom:9px;font-size:15px}
  .ticks li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:3px solid var(--tangerine);border-bottom:3px solid var(--tangerine);transform:rotate(-45deg)}

  /* ===== Journey ===== */
  .journey{background:var(--dark);color:var(--on-dark-1)}
  .journey .eyebrow{color:var(--tangerine)}
  .journey h2.sec{color:var(--white)}
  .journey .sec-sub{color:var(--on-dark-2)}
  .stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:44px;counter-reset:stage}
  .stage{background:var(--dark-tile);border-radius:var(--r-card);padding:24px 20px 22px;position:relative;overflow:hidden}
  .stage .num{color:var(--tangerine);font-weight:700;font-size:13px;letter-spacing:.1em}
  .stage h3{color:var(--white);font-size:16.5px;margin:8px 0 8px;line-height:1.3}
  .stage p{color:var(--on-dark-3);font-size:13.5px;line-height:1.5}
  .journey .claim{margin-top:42px;color:var(--white);font-size:clamp(19px,2.2vw,24px);font-weight:300;line-height:1.5;max-width:70ch}
  .journey .claim b{font-weight:500;color:var(--tangerine)}

  /* ===== Products ===== */
  .products{background:var(--gray-100)}
  .pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:40px}
  .pcard{background:var(--white);border:0.75px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);padding:26px 26px 24px;display:flex;flex-direction:column}
  .pcard .glyph{height:44px;margin-bottom:16px}
  .pcard h3{color:var(--dark);font-size:18.5px;line-height:1.3}
  .pcard .pill{align-self:flex-start;font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 11px;margin:10px 0 12px;color:var(--tang-ink);background:var(--tang-tint)}
  .pcard .pill.ea{color:var(--gray-600);background:var(--gray-100)}
  .pcard p{font-size:14.5px;flex:1}
  .pcard a{font-weight:500;font-size:14.5px;margin-top:16px}
  .pcard a::after{content:" \2192"}

  /* ===== Technology ===== */
  .tech .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:40px}
  .tcol{border:0.75px solid var(--gray-200);border-radius:var(--r-card);padding:24px 26px;box-shadow:var(--shadow)}
  .tcol h3{color:var(--tang-deep);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{font-size:13.5px;font-weight:500;color:var(--dark);background:var(--gray-100);border-radius:var(--r-pill);padding:6px 14px}
  .chip.hot{background:var(--tang-tint);color:var(--tang-ink)}

  /* ===== Use cases ===== */
  .cases{background:var(--dark);color:var(--on-dark-1)}
  .cases .eyebrow{color:var(--tangerine)}
  .cases h2.sec{color:var(--white)}
  .cases .sec-sub{color:var(--on-dark-2)}
  .ucgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:40px}
  .uc{background:var(--dark-tile);border-radius:var(--r-card);padding:22px 22px 20px}
  .uc h3{color:var(--white);font-size:16px;margin-bottom:6px}
  .uc p{color:var(--on-dark-3);font-size:13.5px}
  .uc .tag{color:var(--tangerine);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

  /* ===== Knowledge hub ===== */
  .hub .hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:40px}
  .hcard{border:0.75px solid var(--gray-200);border-radius:var(--r-card);padding:24px 26px;box-shadow:var(--shadow)}
  .hcard h3{color:var(--dark);font-size:17px;margin-bottom:8px}
  .hcard p{font-size:14px;margin-bottom:14px}
  .hcard a{font-weight:500;font-size:14.5px}
  .hcard a::after{content:" \2192"}

  /* ===== CTA band ===== */
  .ctaband{background:var(--tangerine)}
  .ctaband .inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding:44px 0}
  .ctaband h2{color:var(--dark);font-size:clamp(22px,2.6vw,30px);font-weight:700;max-width:26ch}
  .ctaband .btn{background:var(--dark);color:var(--white)}
  .ctaband .btn:hover{background:#1f1f1f}

  /* ===== Footer ===== */
  footer{background:var(--dark);color:var(--on-dark-2)}
  .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:52px 0 40px}
  @media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
  .fgrid img{height:40px;width:auto;margin-bottom:14px}
  .fgrid .slogan{color:var(--on-dark-1);font-size:14.5px;max-width:30ch}
  .fgrid h4{color:var(--white);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
  .fgrid ul{list-style:none}
  .fgrid li{margin-bottom:9px}
  .fgrid a{color:var(--on-dark-2);font-size:14px}
  .fgrid a:hover{color:var(--tangerine)}
  .legal{border-top:1px solid var(--dark-hair);padding:18px 0 24px;font-size:12.5px;color:var(--on-dark-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

  /* ===== Sub-page furniture ===== */
  .pagehero{background:var(--dark);color:var(--on-dark-1);padding:56px 0 48px;border-bottom:4px solid var(--tangerine)}
  .pagehero .eyebrow{color:var(--tangerine)}
  .pagehero h1{color:var(--white);font-weight:700;font-size:clamp(28px,3.6vw,42px);line-height:1.15;margin:10px 0 14px;max-width:26ch}
  .pagehero p{color:var(--on-dark-2);max-width:66ch;font-size:17px}
  .crumbs{font-size:13px;color:var(--on-dark-3);margin-bottom:18px}
  .crumbs a{color:var(--on-dark-3)}
  .crumbs a:hover{color:var(--tangerine)}
  .answer{background:var(--tang-tint);border-radius:var(--r-card);padding:22px 26px;margin:34px 0 0;color:var(--tang-ink);font-size:16px;max-width:100%}
  .answer strong{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
  .prose{max-width:76ch}
  .prose h2{color:var(--tang-title);font-size:26px;margin:44px 0 12px}
  .prose h3{color:var(--dark);font-size:19px;margin:28px 0 8px}
  .prose p{margin-bottom:14px}
  .prose ul{margin:0 0 14px 22px}
  .prose li{margin-bottom:6px}
  table.spec{border-collapse:collapse;width:100%;margin:22px 0;font-size:14.5px}
  table.spec th{background:var(--dark);color:var(--white);text-align:left;padding:10px 14px;font-weight:500}
  table.spec td{border:1px solid var(--gray-300);padding:9px 14px;vertical-align:top}
  table.spec tr:nth-child(even) td{background:var(--gray-100)}

  /* ===== Journey stage icons ===== */
  .stage .sicon{height:40px;width:40px;margin-bottom:12px}

  /* ===== Use-case cards with imagery ===== */
  .uc .ucimg{border-radius:10px;overflow:hidden;margin-bottom:14px;aspect-ratio:16/9;background:var(--dark-alt)}
  .uc .ucimg img{width:100%;height:100%;object-fit:cover}
  .uc-light{background:var(--white);border:0.75px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px 20px 18px}
  .uc-light .ucimg{border-radius:10px;overflow:hidden;margin-bottom:14px;aspect-ratio:16/9}
  .uc-light .ucimg img{width:100%;height:100%;object-fit:cover}
  .uc-light .tag{color:var(--tang-deep);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
  .uc-light h3{color:var(--dark);font-size:16.5px;margin:4px 0 6px}
  .uc-light p{font-size:14px}

  /* ===== FAQ ===== */
  .faq details{border:0.75px solid var(--gray-200);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow);background:var(--white)}
  .faq summary{cursor:pointer;font-weight:500;color:var(--dark);padding:16px 20px;font-size:16px;list-style:none;position:relative;padding-right:44px}
  .faq summary::after{content:"+";position:absolute;right:20px;top:12px;color:var(--tangerine);font-size:22px;font-weight:700}
  .faq details[open] summary::after{content:"\2212"}
  .faq .a{padding:0 20px 18px;font-size:15px;max-width:80ch}

  /* ===== Landing page ===== */
  .lp-hero{background:var(--dark);color:var(--on-dark-1);padding:64px 0;border-bottom:4px solid var(--tangerine)}
  .lp-hero h1{color:var(--white);font-weight:900;font-size:clamp(30px,4vw,48px);line-height:1.12;max-width:24ch;margin:12px 0 18px}
  .lp-hero h1 em{font-style:normal;color:var(--tangerine)}
  .kitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:36px}
  .kit{background:var(--white);border:0.75px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px 24px;display:flex;flex-direction:column}
  .kit .vendor{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-600)}
  .kit h3{color:var(--dark);font-size:17.5px;margin:6px 0 8px}
  .kit p{font-size:14px;flex:1}
  .kit .chips{margin:12px 0 16px}
  .kit a.buy{font-weight:500;font-size:14.5px}
  .kit a.buy::after{content:" \2192"}
  .dk-mark{font-weight:900;font-size:15px;letter-spacing:-.02em;color:#CC0000;white-space:nowrap}
  .dk-mark span{color:var(--dark)}
  .lpform{background:var(--gray-100);border-radius:var(--r-card);padding:30px 32px}
  .lpform label{display:block;font-size:13.5px;font-weight:500;color:var(--dark);margin:14px 0 5px}
  .lpform input,.lpform select{width:100%;padding:11px 14px;border:1px solid var(--gray-300);border-radius:10px;font:inherit;font-size:15px;color:var(--dark);background:var(--white)}
  .lpform .btn{margin-top:20px;width:100%}
  .steps{counter-reset:s;list-style:none;margin-top:30px}
  .steps li{position:relative;padding:0 0 26px 62px;counter-increment:s}
  .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;width:44px;height:44px;border-radius:50%;background:var(--tangerine);color:var(--dark);font-weight:700;display:flex;align-items:center;justify-content:center}
  .steps li:not(:last-child)::after{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--gray-300)}
  .steps h3{color:var(--dark);font-size:17px;margin-bottom:4px}
  .steps p{font-size:14.5px}

  /* ===== LP v2: partners, assurance, testimonial ===== */
  .partners{background:var(--white);border-top:0.75px solid var(--gray-200)}
  .partners .row{display:flex;gap:22px;align-items:stretch;flex-wrap:wrap;margin-top:26px}
  .partner{flex:1 1 300px;background:var(--white);border:0.75px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);padding:26px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .partner img{height:52px;width:auto;max-width:100%;object-fit:contain}
  .partner p{font-size:14px}
  .partner a{font-weight:500;font-size:14.5px}
  .partner a::after{content:" \2192"}
  .assure{background:var(--dark);color:var(--on-dark-1)}
  .assure h2.sec{color:var(--white)}
  .assure .eyebrow{color:var(--tangerine)}
  .assure .sec-sub{color:var(--on-dark-2)}
  .pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:34px 0 8px;counter-reset:pp}
  .pain{background:var(--dark-tile);border-radius:var(--r-card);padding:22px 24px;counter-increment:pp}
  .pain h3::before{content:counter(pp,decimal-leading-zero);display:block;color:var(--tangerine);font-size:13px;font-weight:700;letter-spacing:.12em;margin-bottom:8px}
  .pain h3{color:var(--white);font-size:16px;margin-bottom:6px}
  .pain p{color:var(--on-dark-3);font-size:13.5px}
  .inst{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:34px}
  .instcard{background:var(--dark-tile);border-radius:var(--r-card);padding:28px 30px}
  .instcard .kicker{color:var(--tangerine);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .instcard h3{color:var(--white);font-size:20px;margin:6px 0 10px}
  .instcard p{color:var(--on-dark-2);font-size:14.5px;margin-bottom:10px}
  .instcard .ticks li{color:var(--on-dark-2);font-size:14px}
  .flowline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
  .flowline .fstep{background:var(--dark-alt);color:var(--on-dark-1);border-radius:var(--r-pill);padding:6px 16px;font-size:13.5px;font-weight:500}
  .flowline .farrow{color:var(--tangerine);font-weight:700}
  .story{background:var(--gray-100)}
  .story .card2{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:0;background:var(--white);border:0.75px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;margin-top:34px}
  @media(max-width:860px){.story .card2{grid-template-columns:1fr}}
  .story .txt{padding:36px 40px}
  .story blockquote{font-size:19px;line-height:1.55;color:var(--dark);margin:22px 0 18px;position:relative;padding:10px 0 0 40px}
  .story blockquote::before{content:"\201C";position:absolute;left:0;top:-6px;font-size:58px;line-height:1;color:var(--tangerine);font-weight:700}
  .story .who{font-size:14.5px;color:var(--gray-600)}
  .story .who strong{color:var(--dark)}
  .story .pics{display:grid;grid-template-rows:1fr 1fr}
  .story .pics img{width:100%;height:100%;object-fit:cover}
  .story .nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:22px}
  .story .nums div{background:var(--tang-tint);border-radius:12px;padding:14px 16px}
  .story .nums strong{display:block;color:var(--tang-deep);font-size:22px;font-weight:700}
  .story .nums span{font-size:12.5px;color:var(--tang-ink)}

  /* ===== Diagram cards ===== */
  .diagcard{background:var(--white);border:0.75px solid var(--gray-200);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px;margin-top:30px}
  .diagcard img{width:100%;height:auto;border-radius:10px}
  .diagcard figcaption{font-size:13.5px;color:var(--gray-600);margin-top:14px;max-width:90ch}
  .diag2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px;margin-top:26px}
  .diag2 .diagcard{margin-top:0}