@import url("stylechain-tokens.css");

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);color:var(--white);line-height:1.1;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.blue{color:var(--blue)}
img{max-width:100%}

/* buttons – paired primary + ghost must share height (1px border on every variant) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:var(--btn-fs);line-height:1;min-height:var(--btn-h);padding:0 var(--btn-px);border-radius:var(--btn-radius);cursor:pointer;border:1px solid transparent;background:transparent;color:inherit;white-space:nowrap;appearance:none;-webkit-appearance:none;transition:.18s ease}
.btn-primary{background:var(--blue);color:var(--white-on-fill);border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-hover);border-color:var(--blue-hover);transform:translateY(-1px);box-shadow:0 10px 30px -8px var(--blue-shadow)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--blue-hover);color:var(--blue-hover)}
.btn-text{display:inline-flex;align-items:center;background:transparent;color:var(--white);padding:0 4px;min-height:auto;font-weight:600;font-size:var(--btn-fs);line-height:1;border:0}
.btn-text:hover{color:var(--blue-hover)}
.btn-sm{min-height:var(--btn-h-sm);padding:0 var(--btn-px-sm);font-size:var(--btn-fs-sm)}
.reassure{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--text-dim);margin-top:14px}
.reassure::before{content:"";width:14px;height:14px;flex:none;background:var(--text-dim);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
.reassure b{color:var(--text);font-weight:600}

/* nav */
header{position:sticky;top:0;z-index:50;background:var(--bg-glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--display);font-weight:800;font-size:22px;color:var(--white);letter-spacing:-.02em}
.logo img{height:var(--logo-h);width:auto;display:block}
.logo span{color:var(--blue)}
.skip-link{position:absolute;left:16px;top:-56px;z-index:200;background:var(--blue);color:var(--white-on-fill);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px}
.skip-link:focus{top:12px}
.nav-links{display:flex;align-items:center;gap:30px;font-weight:500;font-size:14px;color:var(--text)}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-drop{position:relative}
.nav-drop-label{display:inline-flex;align-items:center;gap:6px}
.nav-drop-label::after{content:"";width:6px;height:6px;margin-top:-2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.nav-drop-menu{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:196px;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px var(--shadow-sm);z-index:60}
.nav-drop-menu a{display:block;padding:10px 12px;border-radius:8px;white-space:nowrap}
.nav-drop-menu a:hover,.nav-drop-menu a.active{background:var(--blue-12);color:var(--white)}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
.nav-panel-cta{display:none}
.nav-cta{display:flex;align-items:center;gap:22px;flex:none}
.nav-cta .login{font-size:14px;font-weight:500;color:var(--text)}
.nav-cta .login:hover{color:var(--white)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0 -4px 0 auto;background:transparent;border:0;border-radius:8px;cursor:pointer;color:var(--white);flex:none}
.nav-toggle-bar{display:block;width:20px;height:2px;background:currentColor;border-radius:1px;transition:transform .2s,opacity .2s}
.nav-toggle-bar+.nav-toggle-bar{margin-top:5px}
header.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
header.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav-toggle{display:flex;flex-direction:column}
  nav{position:relative;flex-wrap:wrap}
  .nav-panel{position:absolute;top:100%;left:0;right:0;background:var(--bg-glass-solid);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .35s ease,opacity .25s,visibility .25s;z-index:49}
  header.nav-open .nav-panel{max-height:min(80vh,720px);overflow:auto;opacity:1;visibility:visible}
  .nav-panel .nav-links{display:flex!important;flex-direction:column;align-items:stretch;gap:0;padding:4px 28px 8px}
  .nav-panel .nav-links a{display:block;padding:14px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--border)}
  .nav-drop{display:contents}
  .nav-drop-label{display:none}
  .nav-drop-menu{display:contents;position:static;transform:none;min-width:0;padding:0;background:transparent;border:0;box-shadow:none}
  .nav-cta .login{display:none}
  .nav-panel-cta{display:flex;flex-direction:column;padding:8px 28px 20px;border-top:1px solid var(--border)}
  .nav-panel-cta a{display:block;padding:14px 0;font-size:16px;font-weight:500;color:var(--text);border-bottom:1px solid var(--border)}
  .nav-panel-cta a:last-child{border-bottom:0}
  .nav-panel-cta a:hover{color:var(--white)}
}
@media(max-width:600px){.nav-cta{gap:10px}.nav-cta .btn-sm{font-size:13px;padding:0 16px}}

/* page hero (interior pages) */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blue);background:var(--blue-12);border:1px solid var(--blue-30);padding:6px 14px;border-radius:100px;margin-bottom:22px}
.phero{text-align:center;padding:80px 0 56px;background:radial-gradient(800px 420px at 50% 0%,var(--blue-18),transparent 65%),var(--bg)}
.phero h1{font-size:54px;font-weight:800;margin-bottom:18px}
.phero p{font-size:19px;max-width:640px;margin:0 auto}
.phero .btns{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.phero .reassure{margin-top:16px}
.proof-line{margin-top:20px;font-size:14px;color:var(--text-dim)}
.proof-line a{color:var(--white);font-weight:600}
.proof-line a:hover{color:var(--blue-hover)}
.vs-also{text-align:center;margin-top:28px;font-size:15px;color:var(--text-dim);line-height:1.7}
.vs-also a{color:var(--white);font-weight:600}
.vs-also a:hover{color:var(--blue-hover)}
@media(max-width:900px){.phero h1{font-size:36px}}

/* sections */
.sec{padding:80px 0}
.sec.alt{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec-head{text-align:center;max-width:700px;margin:0 auto 48px}
.sec-head h2{font-size:38px;font-weight:700;margin-bottom:14px}
.sec-head p{font-size:18px}
@media(max-width:900px){.sec{padding:56px 0}.sec-head h2{font-size:28px}}

/* cards grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:26px;transition:.2s}
.card:hover{border-color:var(--blue-50);transform:translateY(-3px)}
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column;height:100%;padding:28px 26px 24px}
.plan-badge{min-height:18px;margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);line-height:1.2}
.plan-lead{color:var(--text-dim);margin:0 0 16px;min-height:2.4em}
.plan-price{font-family:var(--display);font-weight:800;color:var(--white);font-size:26px;margin:0 0 18px;letter-spacing:-.02em}
.plan .ftext{flex:1 1 auto;margin:0 0 22px}
.plan .btn{margin-top:auto;width:100%}
.plan-featured{border-color:var(--blue);box-shadow:0 12px 32px var(--shadow-sm)}
.plan-featured:hover{border-color:var(--blue-hover)}
.card .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;background:var(--blue-13);margin-bottom:16px;font-size:22px}
.card h3,.card h4{font-size:19px;font-weight:600;margin-bottom:9px}
.card p{font-size:15px}
@media(max-width:1100px){.cards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.cards,.cards.two,.cards.four{grid-template-columns:1fr}}

/* alternating feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-bottom:30px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:40px}
.frow.plain{background:transparent;border:0;padding:0}
.frow.rev .ftext{order:2}
.ftag{font-size:13px;font-weight:600;color:var(--blue);letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.ftext h3{font-size:26px;font-weight:700;margin-bottom:13px}
.ftext p{font-size:16px;max-width:480px;margin-bottom:16px}
.ftext ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ftext li{display:flex;gap:10px;font-size:15px}
.ftext li .ck{flex:none;margin-top:3px;color:var(--blue);font-weight:700}
@media(max-width:900px){.frow{grid-template-columns:1fr;gap:26px;padding:26px}.frow.rev .ftext{order:0}}

/* product UI mockups */
.mock{background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
/* ---- Real product screenshots -------------------------------------------
   A capture has the app's own background baked into the pixels, so it cannot
   adapt to the theme. Rather than fight that, it sits INSIDE the same window
   frame the CSS mock-ups already use: the gradient plate, the border, the deep
   shadow and three chrome dots. That frame is what makes a light-mode capture
   read as "the application" on a dark page instead of a glaring white slab,
   and it costs nothing on the light 3 Clicks theme because every value is a
   token.

   Pair captures per theme where you can - dark on src, light on
   data-brand-src - see docs/operations/PRODUCT-SCREENSHOT-SPEC.md. */
.mock-shot .mock-body{padding:0}
.mock-shot img{display:block;width:100%;height:auto}
.mock-top{display:flex;align-items:center;gap:7px;padding:4px 4px 14px}
.mock-top .dot{width:11px;height:11px;border-radius:50%;flex:none}
.mock-top .dot:nth-child(1){background:var(--error)}
.mock-top .dot:nth-child(2){background:var(--warn)}
.mock-top .dot:nth-child(3){background:var(--ok)}
/* Hero: same treatment, so the hero shot and the feature shots are one family. */
.hero-visual.is-shot{background:linear-gradient(180deg,var(--mock-top-fade),var(--bg-2));padding:16px;overflow:visible}
.hero-visual.is-shot .mock-body{background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.hero-visual.is-shot img{border-radius:0}
.mock-card{background:linear-gradient(180deg,var(--mock-top-fade),var(--bg-2));border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 40px 80px -30px var(--shadow-lg)}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.mhead .t{font-family:var(--display);font-weight:700;color:var(--white);font-size:14px}
.pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;background:var(--blue-15);color:var(--blue)}
.mrows{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.sw{width:26px;height:26px;border-radius:7px;display:block;flex-shrink:0;overflow:hidden}
.sw-apparel{background:var(--swatch-neutral)}
.sw-apparel img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.5)}
.row b{display:block;color:var(--white);font-size:13px;font-family:var(--body);font-weight:600}
.row .sub{font-size:11px;color:var(--text-dim)}
.status{font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px}
.s-green{background:var(--ok-15);color:var(--ok)}
.s-amber{background:var(--warn-15);color:var(--warn)}
.s-blue{background:var(--blue-18);color:var(--blue)}
.mfoot{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-top:1px solid var(--border)}
.mfoot .lbl{font-size:11px;color:var(--text-dim)}
.mfoot .val{font-family:var(--display);font-weight:700;color:var(--white);font-size:15px}

/* chat bubble mock (AI / supplier chat) */
.chat{display:flex;flex-direction:column;gap:10px;padding:16px}
.bub{max-width:80%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
.bub.user{align-self:flex-end;background:var(--blue);color:var(--white-on-fill);border-bottom-right-radius:4px}
.bub.bot{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:4px}
.bub .who{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px}
.chat-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-2);margin-top:auto;flex:none}
.chat-in span{flex:1;font-size:13px;color:var(--text-dim)}
.chat-in button{width:32px;height:32px;border-radius:8px;background:var(--blue);color:var(--white-on-fill);border:0;line-height:0;cursor:default;flex:none;display:flex;align-items:center;justify-content:center}

/* stat bar */
.statbar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2)}
.statbar .wrap{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:clamp(28px,5vw,72px);padding:26px 28px}
.stat{text-align:center;flex:0 0 auto;min-width:148px}
.stat .n{font-family:var(--display);font-weight:800;color:var(--white);font-size:30px}
.stat .n b{color:var(--blue)}
.stat .l{font-size:13px;color:var(--text-dim)}
@media(max-width:620px){.statbar .wrap{gap:28px 48px}.stat{min-width:120px;flex:1 1 calc(50% - 24px);max-width:calc(50% - 24px)}}

/* bar chart mock (planning) */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding:16px}
.bars .b{flex:1;background:linear-gradient(180deg,var(--blue),var(--blue-deep));border-radius:6px 6px 0 0;position:relative}
.bars .b.dim{background:var(--bar-dim)}
.bars .b span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:11px;color:var(--text)}

/* logo strip / integrations */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
.logos .chip{font-family:var(--display);font-weight:700;font-size:15px;color:var(--white);opacity:.78;background:var(--card);border:1px solid var(--border);padding:12px 22px;border-radius:10px}
/* integration icon grid */
.intg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.intg-tile{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;transition:.2s}
.intg-tile:nth-child(7):nth-last-child(2){grid-column:3}
.intg-tile:nth-child(8):last-child{grid-column:4}
@media(max-width:1100px){
  .intg-grid{grid-template-columns:repeat(3,1fr)}
  .intg-tile:nth-child(7):nth-last-child(2){grid-column:2}
  .intg-tile:nth-child(8):last-child{grid-column:3}
}
@media(max-width:620px){
  .intg-grid{grid-template-columns:repeat(2,1fr)}
  .intg-tile:nth-child(7):nth-last-child(2){grid-column:1}
  .intg-tile:nth-child(8):last-child{grid-column:2}
}
.intg-tile:hover{border-color:var(--blue-50);transform:translateY(-2px)}
.intg-tile img{height:28px;width:28px;object-fit:contain;flex:none}
.intg-tile .badge{height:30px;width:30px;flex:none;border-radius:7px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px;color:var(--white-on-fill)}
.intg-tile .em{font-size:24px;line-height:1;flex:none;width:30px;text-align:center}
.intg-tile b{display:block;font-family:var(--display);font-weight:600;font-size:14px;color:var(--white)}
.intg-tile span{display:block;font-size:11px;color:var(--text-dim)}

/* swatches (materials) */
.sw-label{font-size:13px;font-weight:600;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin:34px 0 14px}
.sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:16px}
.chip2{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.chip2 .swt{height:84px}
.chip2 .lbl{padding:10px 12px}
.chip2 .lbl b{display:block;color:var(--white);font-size:13px;font-weight:600}
.chip2 .lbl span{font-size:11px;color:var(--text-dim)}
.fab-knit{background:repeating-linear-gradient(45deg,var(--fabric-knit),var(--fabric-knit) 4px,var(--fabric-knit-dark) 4px,var(--fabric-knit-dark) 8px)}
.fab-denim{background:repeating-linear-gradient(135deg,var(--fabric-denim),var(--fabric-denim) 3px,var(--fabric-denim-dark) 3px,var(--fabric-denim-dark) 6px)}
.fab-terry{background:repeating-linear-gradient(0deg,var(--swatch-neutral),var(--swatch-neutral) 5px,var(--fabric-terry-mid) 5px,var(--fabric-terry-mid) 10px)}
.fab-rib{background:repeating-linear-gradient(90deg,var(--fabric-rib-pink),var(--fabric-rib-pink) 4px,var(--fabric-rib-pink-dark) 4px,var(--fabric-rib-pink-dark) 8px)}
.fab-rib-g{background:repeating-linear-gradient(90deg,var(--fabric-rib-gray),var(--fabric-rib-gray) 2px,var(--swatch-gray) 2px,var(--swatch-gray) 4px)}
.fab-cord{background:repeating-linear-gradient(135deg,var(--blue-hover) 0 2px,var(--blue) 2px 4px,var(--blue-deep) 4px 6px),repeating-linear-gradient(45deg,var(--white-12) 0 1px,transparent 1px 3px)}
.fab-twill{background:repeating-linear-gradient(60deg,var(--fabric-slate),var(--fabric-slate) 3px,var(--fabric-slate-dark) 3px,var(--fabric-slate-dark) 7px)}
.sw.fab-terry{background:repeating-linear-gradient(0deg,var(--swatch-neutral),var(--swatch-neutral) 3px,var(--fabric-terry-mid2) 3px,var(--fabric-terry-mid2) 6px)}
.sw.fab-rib-g{background:repeating-linear-gradient(90deg,var(--fabric-rib-gray-mid),var(--fabric-rib-gray-mid) 2px,var(--swatch-gray) 2px,var(--swatch-gray) 4px)}
.sw.fab-cord{background:repeating-linear-gradient(135deg,var(--blue) 0 2px,var(--blue) 2px 4px,var(--blue-deep) 4px 6px),repeating-linear-gradient(45deg,var(--white-15) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 1px var(--white-12)}
.apparel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.apparel-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;transition:.2s}
.apparel-card:hover{border-color:var(--blue-50);transform:translateY(-3px)}
.apparel-card img{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:top center;border-radius:8px}
.apparel-card span{font-size:13px;color:var(--text);display:block;margin-top:8px;font-weight:500}
@media(max-width:680px){.apparel-row{grid-template-columns:repeat(2,1fr)}}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* One attributed testimonial reads better centred than stretched across the row. */
.quotes-one{grid-template-columns:1fr;max-width:720px;margin:0 auto}
.quote{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:18px}
.quote p{font-size:15px;color:var(--text-quote)}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--white-on-fill);font-size:15px;flex:none}
.quote .who b{display:block;color:var(--white);font-size:14px;font-family:var(--body)}
.quote .who > div span{font-size:12px;color:var(--text-dim)}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}

/* final CTA */
.final{text-align:center;padding:84px 0;background:radial-gradient(700px 360px at 50% 0%,var(--blue-22),transparent 65%),var(--bg-2);border-top:1px solid var(--border)}
.final h2{font-size:40px;font-weight:800;margin-bottom:14px}
.final p{font-size:19px;max-width:520px;margin:0 auto 28px}
.final .reassure{display:flex;font-size:13px;color:var(--text-dim);margin:20px auto 0;max-width:none}
@media(max-width:900px){.final h2{font-size:30px}}

/* footer */
footer{background:var(--bg);border-top:1px solid var(--border);padding:56px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.25fr .9fr .9fr .9fr .9fr;gap:28px;margin-bottom:36px}
.foot-grid .logo{margin-bottom:14px}
.foot-grid p{font-size:14px;max-width:320px;line-height:1.6}
.fcol h5{font-size:12px;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase;margin-bottom:16px;font-family:var(--body);font-weight:600}
.fcol a:not(.btn){display:block;font-size:14px;color:var(--text);margin-bottom:11px}
.fcol a:not(.btn):hover{color:var(--white)}
.fcol .btn{display:inline-flex;margin-top:8px;margin-bottom:0;width:max-content;max-width:100%}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:22px;font-size:13px;color:var(--text-dim);flex-wrap:wrap;gap:14px}
.foot-legal{display:flex;gap:18px}
.foot-bottom a{color:var(--text-dim)}
.foot-bottom a:hover{color:var(--white)}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .phero{padding:56px 0 40px}
  .phero h1{font-size:32px}
  .phero p{font-size:17px}
}

/* note banner */
.note{background:var(--blue-12);border-bottom:1px solid var(--blue-30);font-size:13px;color:var(--text);text-align:center;padding:9px 16px}
.note b{color:var(--white)}

/* brand logo wall (light tiles so colour logos read on dark) */
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.brand-tile{background:var(--surface-white);border-radius:12px;height:104px;display:grid;place-items:center;padding:20px 24px}
.brand-tile img{max-height:58px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.78;transition:.2s}
.brand-tile:hover img{filter:none;opacity:1}

/* brand logo marquee (3Clicks-style scrolling strip on a clean light band) */
.marquee{position:relative;overflow:hidden;background:var(--surface-white);border-radius:16px;padding:30px 0}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--surface-white),var(--white-fade))}
.marquee::after{right:0;background:linear-gradient(270deg,var(--surface-white),var(--white-fade))}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:sc-scroll 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:40px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.marquee-track img:hover{filter:none;opacity:1}
@keyframes sc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.marquee-track img{height:32px}.marquee-track{gap:44px}}

/* brand photo-tile grid (3Clicks-style big image tiles) */
.brand-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;max-width:1120px;margin:30px auto 0}
.btile{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1;background:var(--bg-tile);box-shadow:0 10px 28px var(--shadow-sm);border:1px solid var(--white-06);text-decoration:none}
.btile::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 2px var(--blue-0);transition:.25s;pointer-events:none}
.btile:hover::after{box-shadow:inset 0 0 0 2px var(--blue-65)}
.btile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.btile:hover img{transform:scale(1.07)}
@media(max-width:640px){.brand-tiles{grid-template-columns:repeat(2,1fr);gap:12px}}

/* customer-story cards with real brand photo banners */
.card.story{display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.card.story:hover{transform:translateY(-3px);border-color:var(--blue-50)}
.card.story .cbanner{aspect-ratio:16/10;overflow:hidden;background:var(--bg-tile)}
.card.story .cbanner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card.story:hover .cbanner img{transform:scale(1.05)}
.card.story .cbody{padding:22px 22px 24px}
.card.story h3{margin:0 0 8px}
.card.story .rs{display:inline-block;margin-top:12px;font-weight:600}

/* Dual-brand logo: exactly one lockup renders per host. Default (StyleChain)
   hides the 3 Clicks mark; :root[data-brand="3clicks"] flips it. Both are in
   the markup so there is no JS swap and no flash. */
.logo .logo-3c{display:none}
:root[data-brand="3clicks"] .logo .logo-sc{display:none}
:root[data-brand="3clicks"] .logo .logo-3c{display:block}

/* Pricing is 3 Clicks-only. Hidden on StyleChain.
   `a` is required so this beats `.fcol a:not(.btn){display:block}`. */
header .nav-links > a[data-brand-only="3clicks"],
.fcol > a[data-brand-only="3clicks"]{display:none}
:root[data-brand="3clicks"] header .nav-links > a[data-brand-only="3clicks"],
:root[data-brand="3clicks"] .fcol > a[data-brand-only="3clicks"]{display:block}