/* Hoisted from the design's inline styles. Declarations are copied
   verbatim; only the :hover rules are new, because the export's
   `style-hover` attribute has no inline equivalent. */

/* --- design base (from the export's <helmet>) --- */
*{box-sizing:border-box}
/* The design export's <helmet> reset. `font-family` reads the TOKEN rather than
   the literal it was exported with: SiteShell loads all 42 sheets on EVERY page,
   so this `body` rule applied site-wide and a hardcoded 'Poppins' here silently
   overrode `--font-body` — meaning no whitelabel could change its body font on
   any SiteShell-routed page (its checkout rendered in Poppins while its own
   landing rendered in Helvneue55). --font-body IS Poppins on the main
   storefront, so nothing changes there.
   `background`/`color` stay as exported for now; they are the same class of
   duplication and want the same treatment, but changing them moves the main
   storefront's ground and copy colour, which is a separate decision. */
    body{margin:0;background:#fff;font-family:var(--font-body);color:#211A46}
    a{color:var(--color-primary)}a:hover{color:var(--color-primary-deep)}
    .hero-feats{flex-wrap:wrap;gap:16px 0}
    @media (min-width:900px){.hero-feats{flex-wrap:nowrap;gap:0}}
    .ben-grid{grid-template-columns:1fr;justify-items:center}
    @media (min-width:900px){.ben-grid{grid-template-columns:1fr 262px 1fr;gap:30px}}
    .news-grid{grid-template-columns:1fr}
    @media (min-width:640px){.news-grid{grid-template-columns:repeat(2,1fr)}}
    @media (min-width:1000px){.news-grid{grid-template-columns:repeat(4,1fr)}}
    .use-grid{grid-template-columns:1fr}
    @media (min-width:900px){.use-grid{grid-template-columns:380px 1fr}}
    .get-grid{grid-template-columns:1fr;justify-items:center}
    @media (min-width:760px){.get-grid{grid-template-columns:repeat(3,1fr)}}
    .dest-grid{grid-template-columns:1fr}
    .dest-cols{grid-template-columns:1fr}
    @media (min-width:700px){.dest-cols{grid-template-columns:repeat(2,1fr)}}
    @media (min-width:1000px){.dest-grid{grid-template-columns:210px 1fr;gap:56px}.dest-cols{grid-template-columns:repeat(3,1fr)}}
    div[ref]::-webkit-scrollbar{display:none}

/* --- element rules --- */
.sf-home-1 { font-family:'Poppins',sans-serif;background:#fff; }
.sf-home-2 { position:relative;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-secondary) 100%);padding:70px 24px 74px; }
.sf-home-3 { position:absolute;inset:0;overflow:hidden;pointer-events:none; }
.sf-home-4 { position:absolute;left:-120px;top:-30px;width:420px;opacity:.5; }
.sf-home-5 { position:absolute;right:-120px;top:-30px;width:420px;opacity:.5; }
.sf-home-6 { max-width:900px;margin:0 auto;text-align:center;position:relative; }
.sf-home-7 { display:block;color:rgba(255,255,255,.7);font-weight:400;font-size: var(--text-lg);margin-bottom:20px; }
.sf-home-8 { font-size: var(--text-h1);line-height:1.23;font-weight:500;color:#fff;margin:0 auto 40px;max-width:850px; }
.sf-home-9 { font-size:.5em;top:-.75em;font-weight:600; }
.sf-home-10 { position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);width:100%;max-width:748px;padding:0 24px;z-index:9; }
.sf-home-11 { background:#fff;border-radius: var(--r-3xl);box-shadow:0 24px 60px rgba(94,58,190,.18);display:flex;align-items:center;gap:12px;padding:0 8px 0 24px;height:64px; }
.sf-home-14 { flex-shrink:0;background:var(--so-grad-btn);color:#fff;text-decoration:none;font-weight:500;font-size:var(--text-base);font-family:'Poppins';line-height:normal;padding:0 34px;height:48px;display:flex;align-items:center;border-radius: var(--r-3xl); }
.sf-home-15 { background:#fff;padding:66px 24px 40px; }
.sf-home-16 { max-width:1080px;margin:0 auto 44px;display:flex;justify-content:center;align-items:center; }
.sf-home-17 { display:flex;align-items:center;gap:12px;padding:0 16px;min-width:0; }
.sf-home-18 { width:46px;height:46px;flex-shrink:0;border-radius:50%;border:2px solid var(--color-primary);display:flex;align-items:center;justify-content:center; }
.sf-home-19 { color:var(--color-primary);font-size: var(--text-xl); }
.sf-home-20 { font-size: var(--text-base);font-weight:400;color: var(--ink-600);line-height:1.3; }
.sf-home-21 { max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px; }
.sf-home-22 { width:70px;height:70px;background:#fff;box-shadow:0 12px 20px 0 rgba(0,0,0,.05);border-radius: var(--r-md);padding:12px;display:flex;align-items:center;justify-content:center; }
.sf-home-23 { padding:64px 24px;background:#fff; }
.sf-home-24 { max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center; }
.sf-home-25 { position:relative;border-radius: var(--r-2xl);overflow:hidden; }
.sf-home-26 { width:100%;display:block; }
.sf-home-27 { position:absolute;inset:0;margin:auto;width:80px;height:80px;border-radius:50%;background:var(--color-primary);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.sf-home-28 { width:56px;height:56px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center; }
.sf-home-29 { transform:translateX(2px); }
.ekomi-video { position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;box-sizing:border-box;padding:0;border:0;background:transparent;overflow:visible; }
/* The dialog fills the viewport and CENTRES its inner, rather than being sized
   itself: a dialog given an explicit width keeps the UA's absolute box, so
   `margin:auto` has nothing to centre against and it paints top-left. The
   [open] guard matters — dialog is display:none until then. */
.ekomi-video[open] { display:flex;align-items:center;justify-content:center;padding:3.75rem 1rem; }
.ekomi-video::backdrop { background:rgba(27,22,54,.72); }
.ekomi-video__inner { position:relative;width:min(56rem,92vw); }
.ekomi-video__frame { aspect-ratio:16/9;width:100%;border-radius: var(--r-2xl);overflow:hidden;background:#000; }
.ekomi-video__frame iframe { width:100%;height:100%;border:0;display:block; }
.ekomi-video__close { position:absolute;top:-2.75rem;right:0;width:2.25rem;height:2.25rem;border-radius:50%;border:none;background:#fff;color:var(--ink-800);font-size:var(--text-md);display:flex;align-items:center;justify-content:center;cursor:pointer; }
@media (max-width:40rem) { .ekomi-video[open] { padding:3rem 0.75rem; } .ekomi-video__inner { width:100%; } }
.ekomi-card { text-align:center; }
.sf-home-30 { height:2.5rem;margin-bottom:1rem;margin-inline:auto; }
.sf-home-31 { font-size: var(--text-h2);font-weight:600;color: var(--ink-800);line-height:1.25; }
.sf-home-32 { font-size: var(--text-md);color: var(--ink-500);margin-bottom:0.75rem; }
.sf-home-33 { display:flex;justify-content:center;align-items:center;gap:0.5625rem;margin-bottom:1.125rem; }
.sf-home-34 { color:var(--color-star);font-size: var(--text-xl);letter-spacing:2px; }
.sf-home-35 { font-size: var(--text-sm);color: var(--ink-500); }
.sf-home-36 { font-size: var(--text-lg);color:#3A3556;line-height:1.5;margin:0 0 1.375rem; }
.sf-home-37 { display:inline-flex;align-items:center;gap:0.5rem;border:1px solid var(--color-primary);color:var(--color-primary);text-decoration:none;font-weight:500;font-size:var(--text-md);font-family:'Poppins';line-height:normal;padding:0 1.875rem;height:3.125rem;border-radius: var(--r-3xl); }
.sf-home-38 { padding:64px 24px 76px;background:linear-gradient(180deg,var(--tint-1) 0%,#FBFAFE 68%,#fff 100%); }
.sf-home-39 { max-width:1240px;margin:0 auto; }
.sf-home-40 { text-align:center;margin-bottom:44px; }
.sf-home-41 { display:grid;grid-template-columns:repeat(4,1fr);gap:22px; }
.sf-home-42 { background:#fff;border-radius: var(--r-3xl);padding:14px 20px 20px;box-shadow:10px 10px 17px 0 rgba(0,0,0,.06);display:flex;flex-direction:column; }
.sf-home-43 { display:flex;align-items:center;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid var(--line-hair);margin-bottom:24px; }
.sf-home-44 { display:flex;align-items:center;gap:12px;min-width:0; }
.sf-home-45 { font-size: var(--text-xl);line-height:1;flex-shrink:0;display:flex;align-items:center; }
.sf-home-46 { font-size: var(--text-xl);font-weight:500;color: var(--ink-700);white-space:nowrap; }
.sf-home-47 { color: var(--ink-400);font-weight:400;font-size:var(--text-xs);font-family:'Poppins';line-height:normal;flex-shrink:0; }
.sf-home-48 { display:flex;flex-direction:column;align-items:center;margin-bottom:24px; }
.sf-home-49 { font-size: var(--text-sm);color: var(--ink-400);margin-bottom:2px; }
.sf-home-50 { font-size: var(--text-h2);font-weight:600;color:var(--color-primary);line-height:1.25;letter-spacing:-.5px; }
.sf-home-51 { display:flex;flex-direction:column;gap:8px;margin-bottom:20px; }
.sf-home-52 { display:flex;align-items:center;gap:9px;font-size: var(--text-sm);color: var(--ink-700); }
.sf-home-53 { font-size: var(--text-sm);color: var(--ink-300); }
.sf-home-54 { margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--so-grad-btn);color:#fff;text-decoration:none;font-weight:600;font-size:var(--text-base);font-family:'Poppins';line-height:normal;height:50px;border-radius: var(--r-3xl); }
.sf-home-55 { font-size: var(--text-md); }
.sf-home-56 { padding:72px 24px 80px;background:#fff; }
.sf-home-57 { max-width:1140px;margin:0 auto; }
.sf-home-58 { text-align:center;margin-bottom:20px; }
.sf-home-59 { display:grid;gap:26px; }
.sf-home-60 { display:flex;flex-direction:column;gap:2px;padding:0 4px; }
.sf-home-61 { font-size: var(--text-sm);flex-shrink:0; }
.sf-home-62 { font-size: var(--text-xs);color: var(--ink-700); }
.sf-home-63 { display:flex;align-items:flex-start;gap:10px;padding:0 4px;margin-bottom:12px; }
.sf-home-64 { flex:1;min-width:0; }
.sf-home-65 { font-size: var(--text-xs);font-weight:600;color: var(--ink-800);line-height:1.25; }
.sf-home-66 { font-size:10.5px;color: var(--ink-400); }  /* artwork: mock-up UI, not page text */
.sf-home-67 { text-align:right;flex-shrink:0; }
.sf-home-68 { font-size: var(--text-sm);font-weight:600;color:var(--color-primary); }
.sf-home-69 { font-size:10.5px;color:#ff2121;text-decoration:line-through; }  /* artwork: mock-up UI, not page text */
.sf-home-70 { display:flex;align-items:center;justify-content:center;gap:5px;background:var(--so-grad-btn);color:#fff;font-weight:600;font-size:var(--text-2xs);font-family:'Poppins';line-height:normal;height:30px;border-radius: var(--r-lg);margin:0 4px 10px; }
.sf-home-71 { font-size: var(--text-xs); }
.sf-home-72 { display:flex;align-items:center;justify-content:space-between;padding:0 4px 9px; }
.sf-home-73 { font-size:9.5px;color: var(--ink-400); }  /* artwork: mock-up UI, not page text */
.sf-home-74 { color:var(--color-star);font-size:10px;letter-spacing:.5px; }  /* artwork: mock-up UI, not page text */
.sf-home-75 { padding:0 4px; }
.sf-home-76 { font-size: var(--text-2xs);color: var(--ink-500); }
.sf-home-77 { font-size: var(--text-2xs);font-weight:500;color: var(--ink-700); }
.sf-home-78 { display:flex;justify-content:center;padding:14px 0 16px; }
.sf-home-79 { text-align:center; }
.sf-home-80 { font-size: var(--text-xs);color:var(--color-primary);text-decoration:underline; }
.sf-home-81 { padding:80px 24px;background:#fff; }
.sf-home-82 { text-align:center;margin-bottom:52px; }
.sf-home-83 { display:grid;gap:56px;align-items:center; }
.sf-home-84 { display:flex;justify-content:center; }
.sf-home-85 { position:relative;width:290px;height:576px;border-radius:44px;background:#1B1636;padding:11px;box-shadow:0 26px 60px rgba(70,50,140,.24);flex-shrink:0; }
.sf-home-86 { position:absolute;top:20px;left:50%;transform:translateX(-50%);width:112px;height:24px;border-radius: var(--r-lg);background:#1B1636;z-index:3; }
.sf-home-87 { position:relative;width:100%;height:100%;border-radius: var(--r-3xl);background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:26px; }
.sf-home-88 { display:flex;flex-direction:column; }
.sf-home-89 { position:relative;display:flex;flex-direction:column;align-items:center;flex-shrink:0;align-self:stretch;width:14px; }
.sf-home-90 { text-align:left;flex:1;padding-bottom:34px; }
.sf-home-91 { display:block;font-size: var(--text-xs);color: var(--ink-300);margin-bottom:5px; }
.sf-home-92 { display:block;font-size: var(--text-base);line-height:1.55;color: var(--ink-600);max-width:300px; }
.sf-home-93 { padding:0 24px 80px;background:#fff; }
.sf-home-94 { max-width:1240px;margin:0 auto;background:#fff;border:1px solid var(--line-tinted);border-radius: var(--r-3xl);overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px;box-shadow:0 8px 28px 0 rgba(94,58,190,.06); }
.sf-home-95 { padding:64px 20px 64px 60px; }
.sf-home-96 { display:inline-block;background:var(--tint-2);color:var(--color-primary);font-weight:600;font-size: var(--text-xs);padding:6px 14px;border-radius: var(--r-2xl);margin-bottom:18px; }
.sf-home-97 { font-size: var(--text-h2);font-weight:500;line-height:1.15;letter-spacing:-.5px;color: var(--ink-900);margin:0 0 16px; }
.sf-home-98 { font-size: var(--text-base);line-height:1.7;color: var(--ink-500);margin:0 0 28px;max-width:440px; }
.sf-home-99 { display:flex;gap:14px; }
.sf-home-100 { height:48px; }
.sf-home-101 { align-self:flex-end;text-align:center;padding-top:40px; }
.sf-home-102 { width:100%;max-width:440px;display:block;margin:0 auto; }
.sf-home-103 { padding:24px 24px 72px;background:#fff; }
.sf-home-104 { max-width:1240px;margin:0 auto;background:var(--tint-1);border-radius:44px;padding:60px 56px 64px; }
.sf-home-105 { text-align:center;margin-bottom:46px; }
.sf-home-106 { display:grid;gap:32px; }
.sf-home-107 { height:46px;display:flex;align-items:center;margin-bottom:22px; }
.sf-home-108 { font-size: var(--text-sm);color: var(--ink-700);line-height:1.6;margin:0 0 22px;flex:1; }
.sf-home-109 { display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:var(--text-base);font-family:'Poppins';line-height:normal;color:var(--color-primary);text-decoration:none; }
.sf-home-110 { font-size: var(--text-base); }
.sf-home-111 { text-align:center;margin-bottom:48px; }
.sf-home-112 { display:grid;gap:34px;align-items:center; }
.sf-home-113 { display:flex;flex-direction:column;gap:46px; }
.sf-home-114 { display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px; }
.sf-home-115 { color:var(--color-primary);font-size: var(--text-xl); }
.sf-home-116 { margin:0;font-size: var(--text-lg);font-weight:400;color: var(--ink-700);line-height:1.45; }
.sf-home-117 { position:relative;width:262px;height:520px;border-radius:40px;background:#2A2438;padding:9px;box-shadow:0 26px 60px rgba(70,50,140,.24);flex-shrink:0; }
.sf-home-118 { position:absolute;top:17px;left:50%;transform:translateX(-50%);width:98px;height:20px;border-radius: var(--r-md);background:#2A2438;z-index:3; }
.sf-home-119 { position:relative;width:100%;height:100%;border-radius: var(--r-3xl);background:#fff;overflow:hidden;display:flex;flex-direction:column; }
.sf-home-120 { display:flex;align-items:center;gap:7px;padding:13px 14px 9px;flex-shrink:0; }
.sf-home-121 { font:600 9.5px 'Poppins';color: var(--ink-700); }
.sf-home-122 { margin-left:auto;display:flex;align-items:center;gap:8px;color: var(--ink-300); }
.sf-home-123 { font-size: var(--text-2xs); }
.sf-home-124 { background:linear-gradient(160deg,var(--color-primary),var(--color-secondary));padding:22px 18px 26px;text-align:center; }
.sf-home-125 { font-weight:600;font-size:var(--text-sm);font-family:'Poppins';line-height:normal;color:#fff;line-height:1.4; }
.sf-home-126 { padding:0 14px;margin-top:-14px; }
.sf-home-127 { display:flex;background:#fff;border-radius: var(--r-xl);padding:3px;box-shadow:0 5px 14px rgba(40,20,90,.14);margin-bottom:9px; }
.sf-home-128 { flex:1;text-align:center;padding:6px 0;border-radius: var(--r-md);background:var(--color-primary);color:#fff;font:600 9.5px 'Poppins'; }
.sf-home-129 { flex:1;text-align:center;padding:6px 0;font:500 9.5px 'Poppins';color: var(--ink-300); }
.sf-home-130 { display:flex;align-items:center;gap:7px;background:#fff;border-radius: var(--r-lg);padding:9px 11px;box-shadow:0 5px 14px rgba(40,20,90,.1); }
.sf-home-131 { font-size:10px;color:var(--color-primary); }  /* artwork: mock-up UI, not page text */
.sf-home-132 { font:400 9px 'Poppins';color: var(--ink-300); }
.sf-home-133 { display:flex;gap:7px;padding:16px 14px 0; }
.sf-home-134 { margin:auto 14px 14px;display:flex;align-items:center;gap:7px;background:#FBE9F0;border-radius: var(--r-md);padding:10px 12px; }
.sf-home-135 { font:500 8.5px 'Poppins';color: var(--ink-500); }
.sf-home-136 { position:absolute;right:14px;bottom:64px;width:30px;height:30px;border-radius:50%;background:var(--color-primary);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(131,87,249,.4); }
.sf-home-137 { color:#fff;font-size: var(--text-xs); }
.sf-home-138 { display:grid;gap:44px;align-items:start; }
.sf-home-140 { width:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size: var(--text-lg);line-height:1; }
.sf-home-141 { font-size: var(--text-base);color: var(--ink-700); }
.sf-home-142 { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:22px; }
.sf-home-143 { display:grid;gap:0 24px; }
.sf-home-144 { width:26px;flex-shrink:0;display:flex;align-items:center;font-size: var(--text-md);line-height:1; }
.sf-home-145 { font-size: var(--text-sm);color: var(--ink-400);padding:14px 0; }
.sf-home-146 { margin-top:26px; }
.sf-home-147 { display:inline-flex;align-items:center;gap:8px;background:var(--so-grad-btn);color:#fff;text-decoration:none;font-weight:500;font-size:var(--text-base);font-family:'Poppins';line-height:normal;padding:0 32px;height:48px;border-radius: var(--r-3xl); }
.sf-home-148 { padding:72px 24px;background:var(--tint-1); }
.sf-home-149 { text-align:center;margin-bottom:40px; }
.sf-home-150 { display:grid;grid-template-columns:repeat(3,1fr);gap:22px; }
.sf-home-151 { background:#fff;border-radius: var(--r-xl);padding:28px 26px;box-shadow:0 10px 26px rgba(70,50,140,.05); }
.sf-home-152 { color:var(--color-star);font-size: var(--text-md);letter-spacing:2px;margin-bottom:12px; }
.sf-home-153 { font-size: var(--text-sm);color:#3A3556;line-height:1.6;margin:0 0 18px; }
.sf-home-154 { display:flex;align-items:center;gap:10px; }
.sf-home-155 { width:38px;height:38px;border-radius:50%;background:#EDE6FE;color:var(--color-primary);font-weight:700;font-size:var(--text-sm);font-family:'Poppins';line-height:normal;display:flex;align-items:center;justify-content:center; }
.sf-home-156 { font-size: var(--text-sm);font-weight:600;color:#211A46; }
.sf-home-157 { padding:72px 24px;background:#fff; }
.sf-home-158 { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.sf-home-159 { text-decoration:none;color:inherit;background:#fff;border:1px solid #EDEAF6;border-radius: var(--r-xl);overflow:hidden;box-shadow:0 10px 26px rgba(70,50,140,.05); }
.sf-home-160 { padding:22px 24px; }
.sf-home-161 { font-size: var(--text-lg);font-weight:600;margin:0 0 8px;line-height:1.35;color: var(--ink-800); }
.sf-home-162 { font-size: var(--text-xs);color:#8A86A3; }
.sf-home-163 { font-size: var(--text-sm);color:#6B6785;line-height:1.55;margin:10px 0 0; }
.sf-home-164 { text-align:center;margin-top:40px; }
.sf-home-165 { display:inline-flex;align-items:center;gap:8px;background:var(--so-grad-btn);color:#fff;text-decoration:none;font-weight:500;font-size:var(--text-md);font-family:'Poppins';line-height:normal;padding:0 40px;height:50px;border-radius: var(--r-3xl); }
.sf-home-166 { font-size: var(--text-lg); }

/* --- white links keep their colour on hover (see the port pipeline) --- */
.sf-home-7:hover { color: rgba(255,255,255,.7); }
.sf-home-8:hover { color: #fff; }
.sf-home-14:hover { color: #fff; }
.sf-home-54:hover { color: #fff; }
.sf-home-70:hover { color: #fff; }
.sf-home-125:hover { color: #fff; }
.sf-home-128:hover { color: #fff; }
.sf-home-137:hover { color: #fff; }
.sf-home-147:hover { color: #fff; }
.sf-home-165:hover { color: #fff; }

/* The hero's search is the shared <DestSearch>, not the design's inert input,
   so the design's box (.sf-home-11) dresses that component instead. The rules
   below only re-skin it here — the control itself is unchanged, and the
   destinations page keeps its own look. */
.sf-home-11 .dest-search { flex:1;min-width:0; }
.sf-home-11 .dest-search__icon { left:0;color:var(--color-primary);font-size: var(--text-2xl); }
.sf-home-11 .dest-search__input {
  padding:0 12px 0 34px;height:48px;border:none;background:transparent;
  box-shadow:none;font-weight:300;font-size:var(--text-md);font-family:'Poppins';line-height:normal;color: var(--ink-800);border-radius:0;
}
.sf-home-11 .dest-search__input:focus { outline:none; }
/* The dropdown hangs off the white box, not off the input. */
.sf-home-11 .dest-search__results { top:calc(100% + 18px);left:-24px;right:-8px;width:auto; }

/* ---- the "Easy to get" phone mock-ups -------------------------------------
   These were inline style objects duplicated in HomeTemplate and EasyToGetBand
   — the same six constants declared twice, so a change had to be made in both.
   They are classes now, on the tokens, defined once. The mock-up's own type
   sizes (the miniature UI drawn inside the handset) stay literal: they are
   ARTWORK, not text on the page, and putting them on the reading scale would
   make the illustration wrong. */
.hp-stepwrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 34px;
  max-width: 300px;
  width: 100%;
}

.hp-ghostnum {
  position: absolute;
  top: 0;
  left: -6px;
  font-weight: var(--weight-bold);
  font-size: 130px;          /* artwork: the outsized step numeral */
  line-height: .78;
  color: var(--tint-3);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hp-phone {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 252px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 16px 44px rgba(70, 50, 140, .13);
  padding: 22px 16px 26px;
  min-height: 400px;
}

.hp-phone-title {
  text-align: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--ink-800);
  line-height: 1.35;
  margin-bottom: 18px;
}

.hp-phone-bar {
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 3.5px;
  border-radius: 2px;
  background: #e8e5f0;
}

.hp-caption {
  text-align: center;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink-700);
  margin: 22px 0 0;
  max-width: 270px;
}

.hp-hl { color: var(--color-primary); font-weight: var(--weight-bold); }

/* Benefit-list icon ring (the "key benefits" band). */
.hp-ben-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid #C9B6FA;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Mobile: the sf-home-* classes were hoisted from a desktop-first design
   and shipped no phone breakpoints. Tighten section padding, collapse the
   multi-column grids, keep the hero search inside the viewport, and drop the
   long marketing paragraphs to a readable width. Everything covered here is
   a plain layout override — the token type scale (tokens.css) already
   shrinks the headings via --text-h1/h2/h3. */
@media (max-width: 900px) {
  /* Hero */
  .sf-home-2 { padding: 44px 20px 60px; }
  .sf-home-4,
  .sf-home-5 { width: 240px; }
  .sf-home-6 { max-width: none; }
  .sf-home-8 { margin-bottom: 32px; }
  .sf-home-10 { max-width: 640px; padding: 0 20px; }
  .sf-home-11 { padding: 0 8px 0 16px; height: 56px; }
  .sf-home-14 { padding: 0 24px; height: 44px; font-size: 0.875rem; }

  /* Operators strip */
  .sf-home-15 { padding: 40px 20px 24px; }
  .sf-home-21 { gap: 20px; }
  .sf-home-22 { width: 58px; height: 58px; padding: 10px; }

  /* Video + text block */
  .sf-home-23 { padding: 40px 20px; }
  .sf-home-24 { grid-template-columns: 1fr; gap: 32px; }

  /* Best-deals band */
  .sf-home-38 { padding: 40px 20px 48px; }
  .sf-home-40 { margin-bottom: 28px; }
  .sf-home-41 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sf-home-42 { padding: 12px 16px 16px; }
  .sf-home-54 { height: 44px; font-size: 0.875rem; }

  /* "Easy to get" */
  .sf-home-56 { padding: 48px 20px; }
  .sf-home-58 { margin-bottom: 20px; }

  /* "Easy to use" — big phone mock stacks above the steps list */
  .sf-home-81 { padding: 48px 20px; }
  .sf-home-82 { margin-bottom: 32px; }
  .sf-home-83 { grid-template-columns: 1fr; gap: 32px; }
  .sf-home-85 { width: 240px; height: 480px; }

  /* App-download band */
  .sf-home-93 { padding: 0 20px 48px; }
  .sf-home-94 { grid-template-columns: 1fr; gap: 0; }
  .sf-home-95 { padding: 40px 24px 32px; }
  .sf-home-98 { max-width: none; }
  .sf-home-101 { padding-top: 0; padding-bottom: 24px; }

  /* Benefits card + "why us" */
  .sf-home-103 { padding: 16px 20px 48px; }
  .sf-home-104 { padding: 40px 24px 44px; border-radius: 32px; }
  .sf-home-105 { margin-bottom: 28px; }
  .sf-home-106 { gap: 24px; }
  .sf-home-112 { grid-template-columns: 1fr; gap: 24px; }
  .sf-home-113 { gap: 32px; }
  .sf-home-117 { width: 230px; height: 460px; }

  /* Reviews cards */
  .sf-home-148 { padding: 48px 20px; }
  .sf-home-149 { margin-bottom: 24px; }
  .sf-home-150 { grid-template-columns: 1fr; gap: 16px; }
  .sf-home-151 { padding: 20px 20px; }

  /* Selected posts */
  .sf-home-157 { padding: 48px 20px; }
  .sf-home-158 { grid-template-columns: 1fr; gap: 16px; }
  .sf-home-165 { padding: 0 28px; height: 46px; font-size: 0.9375rem; }
}

@media (max-width: 640px) {
  .sf-home-41 { grid-template-columns: 1fr; }
  .hp-ghostnum { font-size: 96px; }  /* artwork: the outsized step numeral shrinks on phones */
  .hp-phone { max-width: 232px; min-height: 340px; }
}
/* The line above the store badges (Settings › Misc › Mobile App Links). The
   design ships no class for it — the ported section never rendered the setting
   at all — so it borrows the body copy's colour at a smaller size. */
.sf-home-98b { font-size: var(--text-sm);color: var(--ink-500);margin:0 0 0.75rem; }

/* The hero USP strip is DESKTOP-ONLY (owner, 2026-09-15). Below 900px it wraps
   into a tall stacked list that pushes the operator logos and everything under
   it off the first screen — 900px is where `.hero-feats` already switches
   between the wrapped and single-row layouts, so this hides exactly the wrapped
   form. The compound selector beats `.sf-home-16`'s own `display:flex`
   regardless of source order. The markup stays in the document, so the copy is
   still there for crawlers. */
.sf-home-16.hero-feats { display: none; }
@media (min-width: 900px) {
  .sf-home-16.hero-feats { display: flex; }
}