/* =========================================================================
   SMILE PAYMENTS — brand layer on top of smile-group-design-system.css
   Per DESIGN-RULES.md: only the 4 EDIT tokens change per brand. Everything
   below the tokens is page layout glue (grids/spacing for sections that the
   shared file styles at the component level but doesn't lay out) — it adds
   no new colours, fonts, radii or shadows of its own.
   ========================================================================= */

:root{
  --sm-coral:#17A34A;        /* EDIT — Smile Payments green (logo smile arc) */
  --sm-coral-deep:#13863D;   /* EDIT — ~18% darker, hover */
}
html[data-theme="light"], html:not([data-theme]){ --sm-coral-tint:#F1F9F4; /* EDIT (light) */ }
html[data-theme="dark"]{ --sm-coral-tint:#19392C; /* EDIT (dark) */ }

html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--sm-bg); color:var(--sm-ink); font-family:var(--sm-font-body); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; }
section[id]{ scroll-margin-top:84px; }

/* Shared component vars the system's feature cards expect */
.sm-fcard{ --sm-accent:var(--sm-coral); --sm-accent-tint:var(--sm-coral-tint); }

/* Rule 5: explicit full-bleed backgrounds */
.sm-section.sm-alt{ background:var(--sm-surface-alt); }
.sm-section{ padding:80px 0; }

.sm-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.sm-h2{ font-family:var(--sm-font-head); font-size:clamp(26px,3.4vw,38px); line-height:1.15; letter-spacing:-0.01em; font-weight:700; margin:0 0 14px; color:var(--sm-ink); }
.sm-lead{ font-size:16.5px; line-height:1.65; color:var(--sm-ink); font-weight:500; margin:0 0 14px; }
.sm-body{ font-size:15px; line-height:1.75; color:var(--sm-ink-soft); margin:0 0 22px; }

/* Hero visual: phone image on the page background, no panel. Drop-shadow follows the
   phone's silhouette so the light bezel stays visible on the light theme. */
.sm-hero-visual{ display:flex; justify-content:center; align-items:center; }
.sm-hero-visual img{ width:auto; max-height:480px; filter:drop-shadow(0 24px 36px rgba(27,74,84,.28)); }
html[data-theme="dark"] .sm-hero-visual img{ filter:drop-shadow(0 24px 40px rgba(0,0,0,.55)); }
@media(max-width:940px){ .sm-hero-visual img{ max-height:380px; } }

/* Split (about) */
.sm-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media(max-width:900px){ .sm-split{ grid-template-columns:1fr; gap:36px; } }
.sm-photo{ border-radius:var(--sm-radius); overflow:hidden; border:1px solid var(--sm-border); box-shadow:var(--sm-card-shadow); aspect-ratio:1/1; max-height:520px; }
.sm-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.sm-split .sm-checklist{ margin-bottom:28px; }

/* Services: 2x2 */
.sm-process-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:760px){ .sm-process-2{ grid-template-columns:1fr; } }

/* Terminals */
.sm-terminal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:960px){ .sm-terminal-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .sm-terminal-grid{ grid-template-columns:1fr; } }
.sm-terminal{ margin:0; position:relative; border-radius:var(--sm-radius); overflow:hidden; border:1px solid var(--sm-border); box-shadow:var(--sm-card-shadow); aspect-ratio:4/5; background:var(--sm-surface-alt); }
.sm-terminal img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--sm-ease-out); }
@media (hover:hover) and (pointer:fine){ .sm-terminal:hover img{ transform:scale(1.05); } }
.sm-terminal figcaption{ position:absolute; left:12px; bottom:12px; background:var(--sm-surface); color:var(--sm-ink); font-family:var(--sm-font-head); font-weight:600; font-size:13.5px; padding:7px 14px; border-radius:999px; border:1px solid var(--sm-border); }

/* FAQ (accordion component from the system, no wrapper padding needed) */
.sm-faq-list{ max-width:840px; margin:0 auto; }
.sm-faq-item.sm-open .sm-faq-a{ max-height:400px; }

/* Contact */
.sm-contact-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:32px; align-items:start; }
@media(max-width:900px){ .sm-contact-grid{ grid-template-columns:1fr; } }
.sm-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* The shared form rules set width:100% + padding without border-box (it never touches global
   elements), so fields overran their columns and the card's right padding. */
.sm-form-card input, .sm-form-card textarea, .sm-form-card .sm-btn{ box-sizing:border-box; }
.sm-form-row > *{ min-width:0; }
@media(max-width:560px){ .sm-form-row{ grid-template-columns:1fr; } }
.sm-form-msg{ margin:14px 0 0; font-size:13.5px; color:var(--sm-ink-soft); min-height:1em; }
.sm-contact-panel{ background:var(--sm-teal); color:#F3F1EC; border-radius:var(--sm-radius); padding:36px 32px; }
.sm-contact-panel .sm-contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.sm-contact-panel .sm-contact-list li{ display:flex; gap:14px; font-size:14.5px; line-height:1.6; color:#C7D6D8; align-items:flex-start; }
.sm-contact-panel .sm-contact-list strong{ color:#fff; font-family:var(--sm-font-head); }
.sm-contact-panel .sm-contact-list i{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); color:#9FD1D8; display:flex; align-items:center; justify-content:center; flex-shrink:0; opacity:1; margin:0; }
.sm-contact-panel .sm-contact-list a{ color:#fff; font-weight:600; }
@media (hover:hover) and (pointer:fine){ .sm-contact-panel .sm-contact-list a:hover{ color:#9FD1D8; } }

/* The logo PNGs carry generous transparent padding, so they need more height than
   the shared 40px to read at the intended size; negative margin keeps the bar slim */
.sm-logo img{ height:56px; margin:-8px 0; }
.sm-header.sm-scrolled .sm-logo img{ height:44px; margin:-6px 0; }

@media(max-width:560px){
  .sm-logo img{ height:46px; margin:-6px 0; }
  .sm-nav-right > .sm-btn-primary{ display:none; } /* same CTA lives in the mobile menu */
}

/* Footer: links used inside .sm-contact-list on dark band */
.sm-footer .sm-contact-list a{ color:#fff; }
.sm-footer .sm-foot-logo img{ height:60px; }

/* Scroll reveal (idle state set here; JS toggles .sm-in) */
.sm-js .sm-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--sm-ease-out), transform .6s var(--sm-ease-out); }
.sm-js .sm-reveal.sm-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .sm-js .sm-reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }