/* ==========================================================================
   Black011 front-end stylesheet
   Source of truth: figma/index.html (approved homepage). Values from that
   file are kept as-is; additions for inner pages are marked "added".

   1. Fonts           6. Header           11. Homepage sections
   2. Tokens          7. Page hero        12. Forms
   3. Base            8. Content & prose  13. Footer
   4. Typography      9. Components       14. Responsive
   5. Buttons        10. Tables
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/oswald-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-latin-800-normal.woff2) format("woff2")}

/* 2. Tokens --------------------------------------------------------------- */
:root{
  /* Ink (text and dark surfaces) */
  --ink:#141215;        /* Baltic Sea */
  --black:#000;         /* legacy black011.com */
  --ink-2:#171418;
  --ink-3:#131114;
  --ink-deep:#000;      /* footer (legacy black) */
  --ink-input:#0f0d10;
  --charcoal:#38333b;   /* Ship Gray */
  --slate:#404040;
  --gravel:#4a444d;
  /* Light surfaces */
  --paper:#f6f2ee;      /* Spring Wood */
  --cream:#faf8f5;
  --sand:#f2f1ed;
  --card:#fbfaf7;
  --white:#fff;
  --line:#e4dfd8;       /* Westar */
  --line-2:#dedbd6;
  /* Brand */
  --red:#eb212e;        /* legacy black011.com red */
  --red-hero:#eb212e;
  --red-portal:#eb212e;
  --indigo:#3b33c7;     /* Merchant Processing */
  --amber:#ffb547;      /* Yellow Orange */
  --amber-2:#ffb454;
  --amber-deep:#e8873a;
  --red-dark:#b8141f;   /* added: red text on light backgrounds (AA) */
  /* Muted text */
  --muted:#5d5860;      /* Scarpa Flow */
  --muted-2:#635e69;
  --muted-dark:#cfc8d1; /* Gray Suit: muted text on dark */
  --muted-dark-2:#b9b2bb;
  --muted-dark-3:#a9a2ab;
  /* Type */
  --display:"Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Layout */
  --wrap:1120px;
  --wrap-narrow:820px;  /* added: reading width (FAQ, prose) */
  --gutter:24px;
  --header-h:68px;
  /* Radii (added: named from values used in the design) */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:20px;
  --r-pill:999px;
}

/* 3. Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-100px;z-index:50;background:var(--amber);color:var(--ink);font-weight:700;padding:10px 16px;border-radius:var(--r-sm);text-decoration:none}
.skip-link:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 4. Typography -----------------------------------------------------------
   Display = Oswald 700 uppercase. Body = Manrope 400–800.
   Bare h1–h6 get sensible defaults (zero specificity), so any class wins. */
:where(h1,h2,h3){font-family:var(--display);font-weight:700;text-transform:uppercase}
:where(h1){font-size:52px;line-height:56px}
:where(h2){font-size:40px;line-height:45px}
:where(h3){font-size:24px;line-height:28px}
:where(h4){font-size:18px;line-height:28px;font-weight:700}
:where(h5,h6){font-size:14px;line-height:20px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2)}

.display{font-family:var(--display);font-weight:700;text-transform:uppercase}
.h-hero{font-size:clamp(56px,7.8vw,150px);line-height:1.027}                  /* hero only */
.h-xl{font-size:clamp(52px,7vw,100px);line-height:.95;letter-spacing:-.0068em} /* section titles */
.h-lg{font-size:52px;line-height:56px}                                        /* added: page titles */
.h-ml{font-size:44px;line-height:48px}                                        /* added: detail rows */
.h-md{font-size:40px;line-height:45px;letter-spacing:-.18px}                  /* cards, sub-sections */
.h-sm{font-size:24px;line-height:28px}                                        /* added: service cards */
.lead{font-size:18px;line-height:28.8px;color:var(--muted);max-width:640px}
.text-body{font-size:16px;line-height:25.6px}
.text-sm{font-size:14px;line-height:20px}
.text-muted{color:var(--muted)}
.text-red{color:var(--red-dark)}
.text-center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;line-height:20px;letter-spacing:1.2px;text-transform:uppercase}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:4px;background:currentColor}
.label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2)}
.accent{color:var(--red)} /* red word inside a display title on dark */

/* 5. Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid transparent;font:700 16px/1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:filter .15s,background-color .15s}
.btn:hover{filter:brightness(1.08)}
.btn--red{background:var(--red);color:#fff}
.btn--outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--outline:hover{background:var(--ink);color:var(--paper);filter:none}
.btn--sm{min-height:44px;padding:0 20px;font-size:15px}
.btn--paper{background:var(--paper);color:var(--ink)}
.btn--ghost-light{border-color:var(--paper);color:var(--paper);background:transparent}
.btn--ghost-light:hover{background:var(--paper);color:var(--ink);filter:none}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--hero{min-height:48px;padding:0 32px;font-size:15px}
.btn--block{display:flex;width:100%}                                   /* added */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:none} /* added */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink);text-decoration:none}           /* added */
.link-arrow .icon{width:18px;height:18px;transition:transform .15s}
.link-arrow:hover .icon{transform:translateX(3px)}

/* 6. Promo bar + header --------------------------------------------------- */
.promo{background:var(--red);color:#fff;text-align:center;font-weight:700;font-size:15px;line-height:22px;padding:9px var(--gutter)}
.promo a{color:#fff;text-underline-offset:3px;margin-left:6px;white-space:nowrap}

.site-header{background:var(--black);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:var(--header-h);padding-top:12px;padding-bottom:12px}
.logo{display:block;margin-right:auto;line-height:0}
.logo img{height:32px;width:auto}
.nav{display:flex;gap:22px}
.nav a{font-size:14px;line-height:24px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);opacity:.85;text-decoration:none}
.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:6px} /* added */
.nav-toggle{display:none;background:none;border:0;color:var(--paper);padding:8px;cursor:pointer}
.nav-toggle .icon{width:24px;height:24px}
.nav-toggle__close,.site-header.is-open .nav-toggle__open{display:none}
.site-header.is-open .nav-toggle__close{display:block}

/* 7. Page hero (added: inner pages) ----------------------------------------
   Dark band matching the homepage hero, at page-title scale. */
.page-hero{background:var(--black);color:var(--cream);padding:56px 0 64px}
.page-hero .eyebrow{color:var(--amber)}
.page-hero__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,6vw,84px);line-height:1;color:var(--cream);margin-top:14px;max-width:900px}
.page-hero__title span{color:var(--red-hero)}
.page-hero__lead{font-size:18px;line-height:28.8px;color:var(--muted-dark);max-width:640px;margin-top:18px}
.page-hero .btn-row{margin-top:32px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;font-size:14px;line-height:20px;color:var(--muted-dark-3)}
.breadcrumb li + li::before{content:"/";margin-right:8px;color:var(--gravel)}
.breadcrumb a{color:var(--muted-dark);text-decoration:none}
.breadcrumb a:hover{color:var(--paper);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--paper)}

/* 8. Content layout & prose (added) ---------------------------------------- */
.section{padding:72px 0}
.section--tight{padding:48px 0}
.section--white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--sand{background:var(--sand)}
.section--dark{background:var(--ink);color:var(--paper)}
.section--dark :where(h1,h2,h3){color:var(--paper)}
.section--dark .lead{color:var(--muted-dark)}
.section__head{display:flex;flex-direction:column;gap:13px;margin-bottom:44px}
.section__foot{margin-top:28px}

.content{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.content--single{grid-template-columns:minmax(0,var(--wrap-narrow))}
.content__aside{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:16px}

.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:16px}

/* Long-form text: wrap CMS/legal copy in .prose and use plain elements. */
.prose{font-size:17px;line-height:27.2px;color:var(--ink);max-width:720px}
.prose--full{max-width:none} /* added: inner pages use the full .wrap width, like the header */
.prose > * + *{margin-top:18px}
.prose :where(h2){font-size:40px;line-height:45px;margin-top:56px}
.prose :where(h3){font-size:24px;line-height:28px;margin-top:40px}
.prose :where(h4){font-size:18px;line-height:28px;margin-top:32px}
.prose :where(h2,h3,h4) + *{margin-top:12px}
.prose > :first-child{margin-top:0}
.prose a{color:var(--red-dark);font-weight:600;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose strong{font-weight:700}
.prose ul,.prose ol{padding-left:24px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:6px}
.prose li::marker{color:var(--red)}
.prose ol li::marker{font-weight:700;color:var(--ink)}
.prose blockquote{border-left:4px solid var(--red);padding:4px 0 4px 20px;font-size:20px;line-height:30px;font-weight:600;color:var(--ink-2)}
.prose blockquote cite{display:block;margin-top:8px;font-size:14px;font-style:normal;font-weight:700;color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose code{font:500 .9em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--sand);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.prose small{font-size:14px;color:var(--muted)}
.prose figure img{border-radius:var(--r-xl)}
.prose figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.prose table{width:100%}

/* 9. Components ----------------------------------------------------------- */

/* Pills: tag (dark), badge (amber), svc__tag (label on cards) */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.tag{background:#2b262e;color:var(--cream);font-size:14px;line-height:20px;font-weight:500;padding:6px 10px;border-radius:999px}
.badge,.feature__badge{display:inline-block;background:var(--amber);color:var(--ink);font-weight:700;font-size:14px;line-height:20px;padding:4px 10px;border-radius:999px}
.badge--red{background:var(--red);color:#fff}       /* added */
.badge--indigo{background:var(--indigo);color:#fff} /* added */
.badge--dark{background:var(--ink);color:#fff}      /* added */

/* Icon tiles */
.icon-tile{width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center;flex:none} /* added: generic .feature__icon */
.icon-tile .icon{width:24px;height:24px}
.icon-tile--amber{background:var(--amber);color:var(--ink-3)}
.icon-tile--dark{background:var(--charcoal)}

/* Tick lists */
.checks{display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;color:var(--ink-2)}
.checks li::before{content:"";width:18px;height:18px;border-radius:9px;flex:none;background:var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.checks--lg li{font-size:16px;line-height:24px} /* added */
.ticks{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:10px}
.ticks li{display:flex;align-items:center;gap:8px;font-size:15px;line-height:21px;font-weight:500}
.ticks .icon{width:14px;height:14px;color:#e59a1a}
.marks{display:flex;flex-direction:column;gap:11.5px;font-size:17px;line-height:27.2px} /* added: generic .join__list */
.marks li{display:flex;gap:10px}
.marks li::before{content:"✓";color:var(--red);font-weight:800}
.section--dark .marks li::before{color:var(--amber)}

/* Callout + notice */
.callout{background:var(--sand);border-radius:12px;padding:16px 20px;display:flex;flex-direction:column;gap:2px}
.callout b{font-weight:700;font-size:14px;line-height:20px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2)}
.callout span{font-weight:600;font-size:15px;color:var(--ink-2)}
.notice{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 18px;font-size:15px;line-height:23px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ink)} /* added */
.notice:empty{display:none} /* added: legacy ERROR_INFO_MSG boxes are always printed, empty when there is no message */
.notice .icon{margin-top:2px}
.notice--info{border-left-color:var(--indigo)}
.notice--info .icon{color:var(--indigo)}
.notice--success{border-left-color:#1f8a4c}
.notice--success .icon{color:#1f8a4c}
.notice--warning{border-left-color:var(--amber-deep);background:#fff8ec}
.notice--warning .icon{color:var(--amber-deep)}
.notice--error{border-left-color:var(--red);background:#fff4f4}
.notice--error .icon{color:var(--red-dark)}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px} /* added: generic */
.card p{color:var(--muted);font-size:16px;line-height:25.6px}
.card--sand{background:var(--sand);border-color:transparent}
.card--dark{background:var(--ink);border-color:var(--charcoal);color:var(--paper)}
.card--dark p{color:var(--muted-dark)}
.card--dark :where(h2,h3,h4){color:var(--paper)}
.card--dark .label{color:var(--amber)}
.card--dark .checks li{color:var(--paper)}
.card--dark .checks li::before{background-color:var(--red)}

.feature{border:1px solid var(--line);background:#fff;border-radius:18px;padding:32px 28px 28px;display:flex;flex-direction:column;gap:12px;min-height:323px}
.feature__top{height:46px;display:flex;align-items:center}
.feature__icon{width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center}
.feature__icon .icon{width:24px;height:24px}
.feature h3{min-height:90px;color:var(--ink)}
.feature p{font-size:16px;line-height:25.6px;color:var(--muted)}

.svc{min-width:0;background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:24px 24px 32px;display:flex;flex-direction:column;gap:10px}
.svc__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svc__icon{width:34px;height:34px;border-radius:8px;background:var(--charcoal);color:#fff;display:grid;place-items:center;flex:none}
.svc__icon .icon{width:18px;height:18px}
.svc__tag{max-width:calc(100% - 42px);background:var(--ink);border:1px solid var(--charcoal);color:#fff;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.6px;text-align:center;text-transform:uppercase;padding:2px 8px;border-radius:100px;white-space:normal;overflow-wrap:anywhere}
.svc h4{font:700 24px/28px var(--display);text-transform:uppercase;color:var(--ink-2)}
.svc p{font-size:16px;line-height:23px;color:var(--muted-2)}
.why{display:flex;flex-direction:column;gap:2px;font-size:14px}
.why b{font-weight:700;line-height:20px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2)}
.why span{font-weight:600;color:var(--ink-2);line-height:1.35}
.svc--free{background:var(--amber-2)}
.svc--free .svc__icon{background:var(--amber-deep)}
.svc__price{background:var(--amber-deep);color:var(--ink-2);font:700 40px/44px var(--display);padding:3px 10px;border-radius:100px;letter-spacing:.6px}
.svc--free p,.svc--free .why b{color:var(--ink-2)}

.quote{background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px 28px 28px;display:flex;flex-direction:column;gap:13px;margin:0}
.quote blockquote{margin:0;font-size:17px;line-height:27.2px;color:var(--ink)}
.quote figcaption{font-weight:700;font-size:14.2px;line-height:22.67px;color:var(--muted)}

/* Media with caption pill */
.media{position:relative;border-radius:20px;overflow:hidden;background:#2b262e;margin:0} /* added: generic .detail__media */
.media img{width:100%;height:100%;object-fit:cover}
.caption{position:absolute;left:16px;bottom:16px;background:rgba(20,18,21,.8);color:#fff;font-weight:600;font-size:14px;line-height:20px;padding:5px 12px;border-radius:100px}
.caption--amber{background:rgba(255,181,71,.6);color:var(--ink-2)}

/* Steps */
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 0;padding:0;list-style:none}
.step{border-top:4px solid var(--red);padding-top:67px;display:flex;flex-direction:column;gap:8px}
.step h3{color:var(--ink)}
.step p{font-size:17px;line-height:27.2px;color:var(--muted);max-width:330px}

/* CTA boxes */
.reseller{border:2px solid var(--ink);border-radius:20px;padding:48px 36px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.reseller h2{color:var(--ink);max-width:560px}
.reseller ul{list-style:disc;padding-left:20px;margin-top:14px;color:var(--muted);font-size:17px;line-height:27.2px}
.cta-band{background:var(--ink);color:var(--paper);border-radius:20px;padding:48px 36px;display:flex;align-items:center;justify-content:space-between;gap:32px} /* added */
.cta-band h2{color:var(--paper);max-width:620px}
.cta-band p{color:var(--muted-dark);margin-top:10px;max-width:560px}
.cta-band .btn-row{margin-top:0;flex:none}

/* Accordion (FAQ) — use <details> inside .accordion */
.faq{max-width:820px;margin:0 auto;padding:50px var(--gutter) 88px}
.faq h2{margin-bottom:44px;color:var(--ink)}
.accordion details{border-bottom:1px solid var(--line);padding:20px 0}
.accordion summary{display:flex;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;font-weight:700;font-size:18px;line-height:28.8px;color:var(--ink)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";color:var(--red);font-size:24px;line-height:28.8px;flex:none}
.accordion details[open] summary::after{content:"−"}
.accordion details p{margin-top:10px;color:var(--muted);font-size:17px;line-height:27.2px;max-width:680px}

/* Chips and segmented choices (rate widget) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;background:#f2f2f2;color:#333;font:400 14px/20px var(--body);padding:6px 12px;border-radius:20px;cursor:pointer}
.chip[aria-pressed="true"]{background:#1a1a1a;color:#fff;font-weight:500;padding:6px 14px}
.amounts{display:flex;gap:6px}
.amount{border:0;background:#f2f2f2;color:#333;font:500 14px/20px var(--body);padding:10px;border-radius:8px;cursor:pointer}
.amount[aria-pressed="true"]{background:#1a1a1a;color:#fff;font-weight:600}

/* 10. Tables -------------------------------------------------------------- */
.rates{border:1px solid #dedede;border-radius:10px;overflow:hidden;background:#fff;width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.rates th{background:var(--slate);color:#fff;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:20px;padding:10px 16px;text-align:left}
.rates th:last-child,.rates td:last-child{text-align:right}
.rates td{padding:17px 16px;border-bottom:1px solid #e2e2df;font-weight:500;color:#202020}
.rates tfoot td{background:var(--slate);color:#fff;font-weight:400;line-height:20px;padding:8px 16px;text-align:left!important;border:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* added: wrap wide tables on mobile */

.widget{background:var(--slate);border:1px solid #e5e5e5;border-radius:20px;overflow:hidden}
.widget__top{background:var(--amber-2);padding:16px 16px 12px}
.widget__fields{display:flex;gap:12px;margin-top:16px}
.widget__fields > div{display:flex;flex-direction:column;gap:6px}
.widget__fields > div:first-child{flex:1}
.widget__fields label,.widget__fields .lbl{font-weight:600;font-size:14px;line-height:20px;text-transform:uppercase;color:#202020}
.widget select{appearance:none;background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:10px 14px;font:400 14px var(--body);color:#1a1a1a;width:100%}
.widget table{width:100%;border-collapse:collapse;font-size:14px}
.widget th{background:var(--slate);color:#fff;font-weight:700;text-transform:uppercase;line-height:20px;padding:10px 16px;text-align:left;border-top:1px solid #e8e8e8}
.widget th + th,.widget td + td{text-align:right;padding-left:0}
.widget td{background:#fff;padding:14px 16px;color:#1a1a1a;border-bottom:1px solid #f0f0f0}
.widget td.min{color:#c00;font-weight:700;white-space:nowrap}
.widget td.rate{color:#333}
.widget__note{background:var(--slate);color:#fff;font-size:14px;line-height:20px;padding:12px 16px;border-top:1px solid #e8e8e8}

/* 11. Homepage sections --------------------------------------------------- */
.hero{background:var(--black);padding:40px var(--gutter) 40px}
.hero__inner{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.hero__title{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(56px,7.8vw,150px);line-height:1.027;color:var(--cream)}
.hero__title span{display:block;color:var(--red-hero)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:var(--cream);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:16px;min-height:308px;color:var(--ink-3)}
.panel__head{display:flex;align-items:flex-start;gap:8px}
.panel__icon{width:36px;height:36px;margin-top:7px;border-radius:6px;background:var(--amber);display:grid;place-items:center;flex:none;color:var(--ink-3)}
.panel__title{font:700 40px/44px var(--display);text-transform:uppercase}
.panel__sub{font-size:14px;line-height:20px}
.panel hr{border:0;border-top:1px solid #c9c4be;margin:0}
.panel__label{font-size:14px;line-height:20px;font-weight:700}
.panel__foot{font-size:14px;line-height:20px;font-weight:700;margin-top:auto;text-transform:uppercase;letter-spacing:.04em}

.proof{background:#fff;border-bottom:1px solid var(--line)}
.proof ul{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px 24px;padding-top:19.5px;padding-bottom:20px}
.proof li{display:flex;gap:8px;font-weight:700;font-size:15px;line-height:24px;color:var(--ink)}
.proof li::before{content:"✓";color:var(--red)}

.get{padding-top:50px;padding-bottom:16px}
.get h2{max-width:860px}
.get .lead{margin-top:13px}
.get__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}

.services{background:var(--sand);padding:50px 0 72px;margin-top:34px}
.services__head{display:grid;grid-template-columns:480px 1fr;gap:60px;align-items:start}
.services__head h2{font:700 52px/56px var(--display);text-transform:uppercase;color:var(--ink-2)}
.services__head p{font-size:18px;line-height:28.8px;color:var(--ink-2);padding-top:8px;max-width:580px}
.platform{margin-top:110px}
.platform + .platform{margin-top:0;padding-top:56px;border-top:1px solid var(--charcoal)}
.platform__label{display:flex;align-items:center;gap:16px}
.platform__label h3{font:700 20px/28px var(--body);letter-spacing:1px;text-transform:uppercase;padding:5px 14px;white-space:nowrap}
.platform__label::after{content:"";height:1px;flex:1;background:var(--charcoal)}
.platform--portal h3{color:var(--red-portal)}
.platform--merchant h3{color:var(--indigo)}
.platform__desc{font-size:16px;line-height:23px;color:var(--muted-2);margin-top:20px}
.platform__cards{display:grid;gap:16px;margin-top:20px}
.platform--portal .platform__cards{grid-template-columns:repeat(3,1fr)}
.platform--merchant .platform__cards{grid-template-columns:repeat(4,1fr)}
.platform--portal{padding-bottom:56px}

.detail{display:grid;grid-template-columns:1fr 480px;gap:80px;align-items:start;padding:78px 0 72px;border-top:1px solid var(--line)}
.detail:first-child{border-top:0}
.detail--flip{grid-template-columns:480px 1fr}
.detail--flip .detail__media{order:-1}
.detail__text{display:flex;flex-direction:column;gap:28px;position:relative}
.detail__kicker{position:absolute;top:-28px;left:0;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;line-height:20px;letter-spacing:1.2px;text-transform:uppercase}
.detail__kicker::before{content:"";width:8px;height:8px;border-radius:4px;background:currentColor}
.kicker--portal{color:var(--red-portal)}
.kicker--merchant{color:var(--indigo)}
.detail h2{font:700 44px/48px var(--display);text-transform:uppercase;color:var(--ink-2)}
.detail__text > p:not(.detail__kicker){font-size:16px;line-height:23px;color:var(--muted-2)}
.detail__media{position:relative;height:400px;border-radius:20px;overflow:hidden;background:#2b262e;margin:0}
.detail__media img,.detail__media video{width:100%;height:100%;object-fit:cover}

.steps{padding-top:50px;padding-bottom:88px}
.quotes{padding-top:50px}
.quotes h2{max-width:780px}
.quotes__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}

.join{background:var(--ink);color:var(--paper);padding:50px 0 88px}
.join .wrap{display:grid;grid-template-columns:495px 508px;justify-content:space-between;gap:48px}
.join h2{color:var(--paper)}
.join__intro{display:flex;flex-direction:column;gap:16px}
.join__intro > p{color:var(--muted-dark);font-size:17px;line-height:27.2px}
.join__list{display:flex;flex-direction:column;gap:11.5px;padding-top:8px;font-size:17px;line-height:27.2px}
.join__list li{display:flex;gap:10px}
.join__list li::before{content:"✓";color:var(--amber);font-weight:800}
.join__contact{padding-top:11px;color:var(--muted-dark-3);font-size:16px;line-height:23px;font-style:normal}
.join__contact a{color:inherit}

/* 12. Forms ---------------------------------------------------------------
   .field on light backgrounds by default (added); inside the dark .form card
   the approved dark styling applies. */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
.field label,.field .field__label{font-weight:700;font-size:14px;line-height:22.4px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;min-width:0;height:50px;background:#fff;border:1px solid #cdc7c0;border-radius:10px;padding:0 14px;color:var(--ink);font:400 16px var(--body)}
.field textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.5;resize:vertical}
.field select{appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141215' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.field input::placeholder,.field textarea::placeholder{color:#757575}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:2px solid var(--amber);outline-offset:0}
.field__hint{font-size:14px;line-height:20px;color:var(--muted)}
.field__error{font-size:14px;line-height:20px;font-weight:600;color:var(--red-dark)}
.field [aria-invalid="true"]{border-color:var(--red)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:22px;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--red);flex:none}

.form{align-self:start;margin-top:108px;background:var(--slate);border:1px solid var(--charcoal);border-radius:20px;padding:28px}
.form .field label,.form .field .field__label{color:var(--paper)}
.form .field input,.form .field select,.form .field textarea{background-color:var(--ink-input);border-color:var(--gravel);color:var(--paper)}
.form .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f2ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.form .field input:focus,.form .field select:focus,.form .field textarea:focus{border-color:var(--amber);outline:none}
.form .field__hint{color:var(--muted-dark-3)}
.form .btn{width:100%;margin-top:16px}
.form--static{margin-top:0} /* added: form card outside the join section */
.form__legal{margin-top:16px;font-size:14px;line-height:20px;color:var(--muted-dark-3)}
.form__status{margin-top:12px;font-size:14px;color:var(--amber);min-height:20px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--ink-input);border-radius:12px;padding:5px;border:0;margin:0 0 18px}
.seg label{position:relative;display:grid;place-items:center;min-height:43px;border-radius:8px;font-weight:700;font-size:14px;color:var(--muted-dark-2);cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg label:has(input:checked){background:var(--red);color:#fff}
.seg label:has(input:focus-visible){outline:3px solid var(--amber);outline-offset:2px}

/* 13. Footer -------------------------------------------------------------- */
.site-footer{background:var(--ink-deep);color:var(--muted-dark-2);padding:48px 0 144px;font-size:15px;line-height:24px}
.footer__grid{display:grid;grid-template-columns:559px 379px 1fr;gap:24px 0}
.footer__brand p{margin-top:12px;max-width:311px}
.footer__col{display:flex;flex-direction:column;gap:6px}
.footer__col a{text-decoration:none}
.footer__col a:hover{color:var(--paper);text-decoration:underline}
.footer__legal{margin-top:36px;font-size:14px;line-height:20px}

/* 14. Responsive ---------------------------------------------------------- */
@media (min-width:1181px){
  .services > .wrap,.details{max-width:1168px}
  .platform--merchant .svc__row{flex-wrap:nowrap}
}
@media (max-width:1180px){
  .services__head{grid-template-columns:1fr;gap:16px}
  .platform--merchant .platform__cards{grid-template-columns:repeat(2,1fr)}
  .detail,.detail--flip{grid-template-columns:1fr 1fr;gap:48px}
  .join .wrap{grid-template-columns:1fr 1fr}
  .form{margin-top:0}
  .footer__grid{grid-template-columns:1fr auto auto;gap:24px 64px}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content{grid-template-columns:minmax(0,1fr) 280px;gap:48px}
}
@media (max-width:960px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .site-header.is-open .nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--black);padding:8px 24px 20px;gap:12px}
  .panels{grid-template-columns:1fr}
  .proof ul{grid-template-columns:repeat(2,auto);justify-content:start}
  .get__cards,.platform--portal .platform__cards,.steps__grid,.quotes__grid{grid-template-columns:1fr}
  .feature,.feature h3{min-height:0}
  .detail,.detail--flip{grid-template-columns:1fr;gap:32px;padding-top:70px}
  .detail--flip .detail__media{order:0}
  .detail__media{height:auto;aspect-ratio:6/5}
  .reseller,.cta-band{flex-direction:column;align-items:flex-start}
  .join .wrap{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .platform{margin-top:64px}
  .grid--3{grid-template-columns:1fr}
  .content{grid-template-columns:1fr}
  .content__aside{position:static}
  .section{padding:56px 0}
}
@media (max-width:600px){
  .site-header .btn{display:none}
  .promo{font-size:14px;line-height:20px;padding:8px 16px}
  .logo img{height:26px}
  .ticks{grid-template-columns:1fr}
  .panel__title{font-size:32px;line-height:36px}
  .panel__icon{margin-top:6px}
  .platform--merchant .platform__cards{grid-template-columns:1fr}
  .h-md,:where(h2),.prose :where(h2){font-size:32px;line-height:36px}
  .h-lg,:where(h1){font-size:40px;line-height:44px}
  .h-ml,.detail h2{font-size:36px;line-height:40px}
  .widget__fields{flex-direction:column}
  .rates td{padding:12px 16px}
  .reseller,.cta-band{padding:32px 24px}
  .proof ul{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .grid--2,.grid--4{grid-template-columns:1fr}
  .seg label{font-size:13px;text-align:center;padding:0 4px}
  .page-hero{padding:40px 0 48px}
  .site-footer{padding-bottom:64px}
}