[hidden] { display: none !important; }
.site-home { --site-ink:#16382d; --site-sage:#dcebdd; --site-lime:#dff27b; --site-coral:#e86943; overflow:hidden; color:var(--site-ink); background:#fbfcf7; }
.site-nav { width:min(1180px,calc(100% - 40px)); height:82px; margin:auto; display:flex;align-items:center;gap:40px; }
.site-logo { display:flex;align-items:center;gap:11px;color:var(--site-ink);text-decoration:none;font:800 22px 'Manrope',sans-serif;letter-spacing:-.04em; }.site-logo .brand-mark i { border-color:var(--site-coral); }
.site-nav nav { display:flex;gap:31px;margin-left:auto; }.site-nav nav a { color:#62756e;text-decoration:none;font-size:13px;font-weight:650; }.site-nav nav a:hover { color:var(--site-ink); }
.site-button { min-height:45px;padding:10px 20px;border:1px solid transparent;border-radius:8px;font-weight:800; }.site-button.solid { color:white;background:var(--site-ink);box-shadow:0 10px 25px rgba(22,56,45,.15); }.site-button.light { color:var(--site-ink);background:white; }.site-button.outline { border-color:#adc2b8;background:transparent; }.site-button:hover { transform:translateY(-1px); }
.site-hero { width:min(1180px,calc(100% - 40px));min-height:680px;margin:auto;display:grid;grid-template-columns:.92fr 1.08fr;gap:55px;align-items:center;padding:66px 0 90px; }.hero-copy h1 { max-width:630px;margin:12px 0 24px;font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-.072em; }.hero-copy h1 em { color:var(--site-coral);font-style:normal; }.hero-copy > p { max-width:570px;color:#65766f;font-size:18px;line-height:1.65; }.site-kicker { color:var(--site-coral);font-size:11px;font-weight:850;letter-spacing:.19em;text-transform:uppercase; }.site-actions { display:flex;align-items:center;gap:25px;margin-top:30px; }.site-actions a { color:var(--site-ink);font-weight:750; }.trust-row { display:flex;gap:20px;margin-top:23px;color:#718078;font-size:12px; }.trust-row span::first-letter { color:#438068; }
.hero-visual { position:relative;padding:35px 0 35px 35px; }.hero-visual::before { content:'';position:absolute;inset:-25px -180px -25px 50px;border-radius:50% 0 0 50%;background:var(--site-sage);transform:rotate(-4deg); }.browser-card { position:relative;z-index:1;border:7px solid #18382e;border-radius:17px;overflow:hidden;background:white;box-shadow:0 35px 70px rgba(23,60,47,.22);transform:rotate(1.4deg); }.browser-bar { height:34px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#17372d; }.browser-bar > span { width:7px;height:7px;border-radius:50%;background:#d8e7db;opacity:.7; }.browser-bar small { margin:auto;color:#c3d3cb;font-size:8px; }.mini-menu { min-height:410px;padding:28px 35px;background:linear-gradient(145deg,#f2d9cc,#fff 54%,#f7f2e9); }.mini-brand { color:#183b30;font-weight:850; }.mini-heading { margin:38px 0 23px; }.mini-heading small,.mini-heading strong { display:block; }.mini-heading small { color:var(--site-coral);font-size:8px;letter-spacing:.15em;text-transform:uppercase; }.mini-heading strong { font:800 45px 'Manrope',sans-serif;letter-spacing:-.06em; }.mini-tabs { display:flex;gap:7px;padding-bottom:16px;border-bottom:1px solid #dfe4df;font-size:9px; }.mini-tabs>* { padding:6px 10px;border-radius:99px; }.mini-tabs b { color:white;background:#183b30; }.mini-items p { display:grid;grid-template-columns:1fr auto;margin:0;padding:15px 0;border-bottom:1px solid #e5e7e2;font-size:11px; }.mini-items small { grid-column:1;color:#79847f; }.mini-items span { color:var(--site-coral);font-weight:800; }.floating-pill { position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:white;box-shadow:0 15px 35px rgba(20,49,39,.16);font-size:10px; }.floating-pill b { display:grid;place-items:center;width:25px;height:25px;border-radius:7px;color:white;background:var(--site-coral);font-size:13px; }.floating-pill span { color:#64746e;font-weight:700; }.floating-pill.one { left:3px;top:82px; }.floating-pill.two { right:-25px;bottom:60px; }
.logo-strip { display:flex;align-items:center;justify-content:center;gap:clamp(25px,5vw,70px);padding:24px 25px;color:#829088;border-block:1px solid #e5e9e3;background:white;font-size:10px;letter-spacing:.13em; }.logo-strip strong { color:#566a62;font-size:11px; }
.site-section { width:min(1180px,calc(100% - 40px));margin:auto;padding:115px 0; }.site-heading { max-width:660px;margin:0 auto 50px;text-align:center; }.site-heading h2,.feature-copy h2,.site-cta h2 { margin:10px 0 14px;font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.06em; }.site-heading p,.feature-copy>p { color:#687a72;font-size:16px; }
.steps-section { padding-bottom:130px; }.site-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:18px; }.site-steps article { position:relative;min-height:300px;padding:29px;border:1px solid #dce5dd;border-radius:15px;background:white;box-shadow:0 15px 45px rgba(30,67,52,.055); }.site-steps article:nth-child(2) { transform:translateY(18px);background:#e8f1e5; }.step-number { color:#99aaa2;font-size:10px;font-weight:850; }.step-icon { width:52px;height:52px;margin:35px 0 24px;display:grid;place-items:center;border-radius:14px;color:white;background:var(--site-ink);font-size:22px; }.site-steps article:nth-child(2) .step-icon { background:var(--site-coral); }.site-steps h3 { margin-bottom:9px;font-size:20px; }.site-steps p { color:#718078;font-size:14px; }
.feature-section { width:100%;display:grid;grid-template-columns:minmax(0,490px) minmax(440px,600px);justify-content:center;gap:95px;padding-inline:40px;background:#ecf3e9; }.feature-copy ul { display:grid;gap:20px;margin:30px 0;padding:0;list-style:none; }.feature-copy li { display:grid;grid-template-columns:30px 1fr;gap:12px; }.feature-copy li>span { width:25px;height:25px;display:grid;place-items:center;border-radius:50%;color:white;background:var(--site-coral);font-size:11px; }.feature-copy li strong,.feature-copy li small { display:block; }.feature-copy li small { margin-top:2px;color:#718078; }.feature-board { align-self:center;border:7px solid #17372d;border-radius:15px;overflow:hidden;background:white;box-shadow:0 30px 65px rgba(27,63,49,.18);transform:rotate(-1deg); }.board-top { height:39px;display:flex;align-items:center;gap:8px;padding:0 13px;color:#d9e9df;background:#17372d;font-size:9px; }.board-top i { width:8px;height:8px;border-radius:50%;background:var(--site-coral); }.board-top b { margin-left:auto;padding:4px 8px;border-radius:99px;color:#17372d;background:var(--site-lime); }.board-body { min-height:350px;display:grid;grid-template-columns:105px 1fr; }.board-body aside { display:grid;align-content:start;gap:4px;padding:24px 11px;background:#f1f4ef;font-size:9px; }.board-body aside span { padding:8px;border-radius:6px; }.board-body aside .active { color:white;background:#21493b; }.board-body>div { padding:31px; }.board-body>div>small { color:var(--site-coral);font-size:8px;letter-spacing:.15em; }.board-body h3 { margin:3px 0 18px;font-size:28px; }.board-item { display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #e4e8e4;font-size:11px; }.board-item small { display:block;color:#829088; }.board-item>b { color:var(--site-coral); }.board-body button { margin-top:18px;padding:7px 11px;border:1px dashed #a9bcb2;border-radius:5px;color:#315e4d;background:#f6f9f4;font-size:9px; }
.live-section { width:min(1280px,calc(100% - 24px)); }.live-frame { border:9px solid #18372d;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(22,56,45,.16); }.live-frame menu-flip, .live-frame vari-menu { min-height:600px; }
.site-cta { padding:95px 25px;text-align:center;color:white;background:var(--site-ink); }.site-cta .site-kicker { color:var(--site-lime); }.site-cta h2 { margin-inline:auto;max-width:700px; }.site-cta p { margin-bottom:25px;color:#b9ccc4; }.site-footer { min-height:100px;display:flex;align-items:center;gap:30px;padding:25px max(30px,calc((100% - 1180px)/2));background:#102d24;color:#b9cac3; }.site-footer .site-logo { color:white; }.site-footer p { margin:0; }.site-footer button { margin-left:auto;border:0;color:var(--site-lime);background:transparent;font-weight:750; }
@media(max-width:900px) { .site-nav nav { display:none; }.site-hero { grid-template-columns:1fr;padding-top:40px; }.hero-copy { text-align:center; }.hero-copy>p { margin-inline:auto; }.site-actions,.trust-row { justify-content:center; }.hero-visual { max-width:650px;margin:auto;padding-left:20px; }.logo-strip strong:nth-last-child(-n+2) { display:none; }.site-steps { grid-template-columns:1fr; }.site-steps article:nth-child(2) { transform:none; }.feature-section { grid-template-columns:1fr;gap:55px;padding-inline:30px; }.feature-copy { max-width:620px;margin:auto; }.feature-board { width:min(620px,100%);margin:auto; } }
@media(max-width:600px) { .site-nav { width:calc(100% - 28px); }.site-nav .site-button { padding:8px 12px;font-size:12px; }.site-hero { width:calc(100% - 28px);min-height:auto;padding-bottom:65px; }.hero-copy h1 { font-size:45px; }.site-actions { flex-direction:column;gap:15px; }.trust-row { flex-wrap:wrap;gap:8px 14px; }.hero-visual { padding:5px; }.floating-pill { display:none; }.mini-menu { min-height:335px;padding:22px; }.mini-heading { margin:25px 0 16px; }.mini-heading strong { font-size:34px; }.logo-strip { gap:20px; }.logo-strip strong:nth-last-child(-n+3) { display:none; }.site-section { width:calc(100% - 28px);padding:80px 0; }.feature-section { width:100%;padding-inline:20px; }.board-body { grid-template-columns:78px 1fr; }.board-body>div { padding:21px 15px; }.live-section { width:calc(100% - 12px); }.live-frame { border-width:5px; }.site-footer { align-items:flex-start;flex-direction:column;gap:10px; }.site-footer button { margin:0; } }

/* Phone website: comfortable touch targets and reduced decorative overflow. */
@media(max-width:600px) {
  .site-nav { height:70px;gap:12px; }
  .site-logo { font-size:20px; }
  .site-nav .site-button,.site-actions .site-button,.site-footer button { min-height:44px; }
  .site-nav .site-button { margin-left:auto; }
  .site-hero { gap:38px;padding-top:38px; }
  .hero-copy h1 { font-size:clamp(39px,12vw,48px);line-height:1; }
  .hero-copy>p { font-size:16px;line-height:1.55; }
  .site-actions { align-items:stretch; }
  .site-actions .site-button { width:100%; }
  .hero-visual::before { inset:-15px -60px -15px 18px; }
  .browser-card,.feature-board { border-width:4px;transform:none; }
  .site-heading h2,.feature-copy h2,.site-cta h2 { font-size:36px; }
  .site-steps article { min-height:0;padding:24px; }
  .step-icon { margin:24px 0 18px; }
  .board-body aside { padding-inline:6px; }
  .site-cta { padding:70px 18px; }
}