/* Sales page — hoisted from the design's inline styles
   (.local/simoptions.com/Product-France.dc.html). Declarations are copied
   verbatim EXCEPT the two brand hexes, which resolve through the theme tokens
   so a palette change lands in one place; the :hover rules are new, because
   the export's `style-hover` attribute has no inline equivalent. */

/* 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. */

/* --- element rules --- */
.sf-sales-1 { font-family:'Poppins',sans-serif;background:#fff; }
.sf-sales-2 { position:relative;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-secondary) 100%);padding:48px 24px 44px;margin-bottom:66px; }
.sf-sales-3 { max-width:1140px;margin:0 auto; }
.sf-sales-4 { font-size: var(--text-sm);color:rgba(255,255,255,.85);margin-bottom:26px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.sf-sales-5 { color:#fff;text-decoration:none; }
.sf-sales-6 { font-size: var(--text-base);opacity:.7; }
.sf-sales-7 { color:rgba(255,255,255,.85); }
.sf-sales-8 { display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start; }
.sf-sales-9 { padding-top:8px; }
.sf-sales-10 { font-size: var(--text-h1);font-weight:500;line-height:1.15;color:#fff;margin:0 0 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.sf-sales-11 { font-size: var(--text-h3);line-height:1;display:inline-flex;align-items:center; }
/* NEW (not from the design export): a REGION hero icon is a mask painted with
   `currentColor` via `--fi-region-color` (public/assets/css/flags.css), whose
   default is `--color-action` — invisible against this section's purple
   gradient. Country flags are background-images and ignore this, so one rule
   safely covers both cases. */
.sf-sales-11 { --fi-region-color: #fff; }
/* …and 20% larger than a country flag (owner, 2026-09-16). A region mask is
   square and sized `contain` inside the 1.35em x 1em flag box, so it only ever
   fills the 1em HEIGHT while a country flag fills the whole box — at the same
   font-size the region icon reads noticeably smaller. `.fi` is sized in `em`,
   so font-size is the dial. */
.sf-sales-11--region { font-size: calc(var(--text-h3) * 1.2); }

/* The note's device-compatibility trigger. A BUTTON, because it opens the QR
   dialog rather than navigating — this strips the control back to text so the
   design's own note-link rule below can paint it exactly as the <a> it
   replaced, and the sentence still scans as prose. */
.sales__note-link { appearance:none;background:none;border:0;padding:0;font:inherit;cursor:pointer; }
.sf-sales-12 { font-size: var(--text-xl);font-weight:300;color:#fff;line-height:1.5;margin:0; }
.sf-sales-13 { background:#fff;border-radius: var(--r-2xl);padding:28px 30px;box-shadow:0 20px 50px rgba(0,0,0,.15); }
.sf-sales-14 { font-size: var(--text-xl);font-weight:600;color:#5193fc;margin:0 0 16px; }
.sf-sales-15 { display:flex;flex-direction:column; }
.sf-sales-16 { flex:0 0 46%;font-weight:500;color: var(--ink-800);display:flex;align-items:center;gap:9px; }
.sf-sales-17 { color:var(--color-primary);font-size: var(--text-xl); }
.sf-sales-18 { position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);width:90%;max-width:1000px;background:#fff;border:1px solid #dedede;border-radius: var(--r-2xl);box-shadow:5px 15px 40px 0 rgba(0,0,0,.04);padding:16px 20px; }
.sf-sales-19 { display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; }
.sf-sales-20 { flex:1 1 auto;text-align:center;font-size: var(--text-base);color: var(--ink-700);display:flex;align-items:center;justify-content:center;gap:9px; }
.sf-sales-21 { padding:56px 24px;background:#fff; }
.sf-sales-22 { max-width:1200px;margin:0 auto; }
.sf-sales-23 { text-align:center;margin-bottom:40px; }
.sf-sales-54 { max-width:1000px;margin:0 auto; }
.sf-sales-55 { background:#fff;border-radius: var(--r-xl);overflow:hidden;border:1px solid var(--line-card);box-shadow:5px 10px 20px 0 rgba(0,0,0,.1);max-width:768px;margin:0 auto; }
.sf-sales-56 { display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr; }
.sf-sales-57 { padding:20px 22px;font-size: var(--text-sm);font-weight:600;color: var(--ink-800); }
.sf-sales-58 { padding:20px 14px;text-align:center;font-weight:600;font-size: var(--text-sm);color:var(--color-primary);background:var(--tint-2); }
.sf-sales-59 { padding:20px 14px;text-align:center;font-weight:500;font-size: var(--text-sm);color: var(--ink-700); }
.sf-sales-60 { display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;border-top:1px solid var(--line-hair); }
.sf-sales-61 { padding:18px 22px;font-size: var(--text-sm);font-weight:600;color: var(--ink-800); }
.sf-sales-62 { padding:18px 14px;text-align:center;font-size: var(--text-xs);font-weight:600;color:var(--color-primary);background:var(--tint-2); }
.sf-sales-63 { padding:18px 14px;text-align:center;font-size: var(--text-xs);color: var(--ink-600); }
.sf-sales-64 { padding:40px 24px 72px;background:#fff; }
.sf-sales-65 { max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center; }
.sf-sales-66 { position:relative;border-radius: var(--r-2xl);overflow:hidden; }
.sf-sales-67 { width:100%;display:block; }
.sf-sales-76 { padding:72px 24px;background:var(--tint-1); }
.sf-sales-77 { max-width:1100px;margin:0 auto; }
.sf-sales-78 { text-align:center;margin-bottom:52px; }
.sf-sales-79 { display:grid;grid-template-columns:repeat(3,1fr);gap:32px; }
.sf-sales-80 { background:#fff;border-radius: var(--r-2xl);padding:36px 30px;text-align:center;box-shadow:0 12px 32px rgba(70,50,140,.06);position:relative; }
.sf-sales-81 { position:absolute;top:24px;left:26px;width:38px;height:38px;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:700;font-size:var(--text-lg);font-family:'Poppins';line-height:normal;display:flex;align-items:center;justify-content:center; }
.sf-sales-82 { height:150px;width:auto;margin:0 auto 22px;display:block; }
.sf-sales-83 { font-size: var(--text-xl);font-weight:600;margin:0 0 10px; }
.sf-sales-84 { font-size: var(--text-sm);color:#6B6785;line-height:1.6;margin:0; }
.sf-sales-85 { padding:76px 24px;background:#fff; }
.sf-sales-86 { display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center; }
.sf-sales-87 { text-align:center; }
.sf-sales-88 { width:300px;max-width:100%;filter:drop-shadow(0 30px 50px rgba(70,50,140,.22)); }
.sf-sales-89 { display:flex;flex-direction:column;gap:26px; }
.sf-sales-90 { display:flex;gap:20px;align-items:flex-start;background:var(--tint-1);border-radius: var(--r-xl);padding:24px 26px; }
.sf-sales-91 { width:74px;height:74px;flex-shrink:0; }
.sf-sales-92 { font-size: var(--text-xs);font-weight:700;color:var(--color-primary);letter-spacing:.5px; }
.sf-sales-93 { font-size: var(--text-xl);font-weight:600;margin:4px 0 7px; }
.sf-sales-94 { padding:0 24px 76px;background:#fff; }
.sf-sales-95 { max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--tint-1);border-radius: var(--r-3xl);padding:48px 46px; }
.sf-sales-96 { width:100%;border-radius: var(--r-xl);display:block; }
.sf-sales-102 { padding:64px 24px 80px;background:#fff; }
.sf-sales-103 { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.sf-sales-104 { 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-sales-105 { padding:22px 24px; }
.sf-sales-106 { font-size: var(--text-lg);font-weight:600;margin:0 0 8px;line-height:1.35;color: var(--ink-800); }
.sf-sales-107 { font-size: var(--text-xs);color:#8A86A3; }
.sf-sales-108 { font-size: var(--text-sm);color:#6B6785;line-height:1.55;margin:10px 0 0; }

/* --- white links keep their colour on hover (see the port pipeline) --- */
.sf-sales-4:hover { color: rgba(255,255,255,.85); }
.sf-sales-5:hover { color: #fff; }
.sf-sales-7:hover { color: rgba(255,255,255,.85); }
.sf-sales-10:hover { color: #fff; }
.sf-sales-12:hover { color: #fff; }
.sf-sales-81:hover { color: #fff; }

/* --- rules for the parts the design carried as per-item inline bindings ---
   The export bound these through `{{ }}`, so the hoist could not turn them
   into classes; the declarations are the design's own. */
.sf-sales-tier { flex:0 0 54%;color: var(--ink-700); }
.sf-sales-tier-ideal { flex:0 0 54%;color:var(--color-primary);font-weight:700; }
.sf-sales-guide-cover { height:180px;background:var(--tint-3) center/cover no-repeat; }

/* The article section's body is editor HTML, so it is styled by element
   rather than by the design's per-node classes. */
.sf-sales-article h3 { font-size: var(--text-h3);font-weight:500;color: var(--ink-800);line-height:1.2;margin:0 0 16px; }
.sf-sales-article p { font-size: var(--text-base);color:#6B6785;line-height:1.7;margin:0 0 18px; }
.sf-sales-article ul { display:flex;flex-direction:column;gap:12px;list-style:none;padding:0;margin:0; }
.sf-sales-article li { position:relative;padding-left:17px;font-size: var(--text-sm);color: var(--ink-800);line-height:1.55; }
.sf-sales-article li::before { content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--color-primary); }

/* The plan grid is the shared <PlanGrid>; it sits in the design's own
   4-up track rather than shipping a second grid definition. */
.sf-sales-22 .plan-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start; }
/* The shared .plan-card ships flex-basis + max-width: calc(25% - 18px) for its
   OWN flex parent (`.plan-grid`). Here the sales page swaps that parent for a
   CSS grid, and percentages in max-width resolve against the grid CELL (not
   the row), so each card collapsed to ~6% of the container. Override both. */
.sf-sales-22 .plan-card { border-radius: var(--r-3xl);box-shadow:5px 15px 40px 0 rgba(0,0,0,.04);flex:1 1 auto;max-width:none; }

@media (max-width:1100px) {
  .sf-sales-8 { grid-template-columns:1fr; }
  .sf-sales-22 .plan-grid { grid-template-columns:repeat(2,1fr); }
  .sf-sales-65,.sf-sales-86,.sf-sales-95 { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .sf-sales-10 { font-size: var(--text-h2); }
  .sf-sales-22 .plan-grid,.sf-sales-79,.sf-sales-103 { grid-template-columns:1fr; }
  .sf-sales-18 { position:static;transform:none;width:auto;margin:24px auto 0; }
  .sf-sales-2 { margin-bottom:0; }
  /* The comparison table is DESKTOP-ONLY (owner, 2026-09-15). Its four columns
     are a fixed grid (`.sf-sales-56`, 1.4fr + 3×1fr); squeezed to a phone the
     feature-label column collapses to nothing, so every row reads as three
     unlabelled values against a blank first cell. Hidden rather than reflowed —
     a reflow is a design decision, not a fix. The markup stays in the document,
     so the comparison copy is still there for crawlers. */
  .sales-competitors { display:none; }
}

/* The design's "make sure your phone is eSIM-compatible" note. <PlanGrid>
   renders it as .sales__note, so the design's rules land there. */
.sf-sales-22 .sales__note { text-align:center;font-size: var(--text-sm);color: var(--ink-500);margin-top:28px; }
.sf-sales-22 .sales__note a,
.sf-sales-22 .sales__note .sales__note-link { color:var(--color-primary);text-decoration:none;font-weight:500; }
.sf-sales-22 .sales__plans > .container { max-width:none;padding:0; }
.sf-sales-22 .sales__no-plans { text-align:center;font-size: var(--text-md);color: var(--ink-500);padding:32px 0; }

/* The hero's trip-length rows and the plan-detail labels — inline style
   objects until now, so they carried literals the scale could not reach. */
.sf-sales-rec-row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  font-size: var(--text-base);
}

.sf-sales-dl {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: #8A86A3;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.sf-sales-rec-row.is-ideal { background: #f6f2ff; border-radius: var(--r-sm); }

/* The closing SEO prose — same measure as the destination article above it. */
.sf-sales-seo { max-width:1140px;margin:0 auto;padding:0 24px 76px; }