/* arcuby.app's public sales pages - the landing page at "/" and the price list at /fiyatlar
   (Pages/Sales). Taken from Claude Design project 77f69ab2-febe-4e17-87bc-ec431a5418c0, file
   "AH - Satis sayfasi" (markup: docs/design/import/AH - Satis sayfasi.dc.html; classes: that
   project's yeni-siniflar-satis.css), as written.
   Loaded only by Pages/Sales/_SalesLayout.cshtml, after tenant-app.css and onboarding.css.

   Not taken from the source:
   - the tapp-nav-icon-* / tapp-nav-subicon-* fills, which the mock-up repeated only because it
     did not load tenant-app.css - they live there;
   - the mock-up frame (.tapp-yn-frame) and the white text on .tapp-btn-primary, which is
     tenant-app.css's own rule;
   - the option families the design drew and did not pick (13d by-sector cards, 13e ladder,
     the sentence and tab sector pickers, the trust grid, the "every package" strip, the single
     .tapp-ss-shot frame) - the page draws none of them.

   Px corners became --r-* tokens (ArchitectureRuleTests); the three corners with no match on
   that scale are declared below beside the design's own size tokens.

   Light/dark: the logo and payment band switch on html[data-bs-theme], not on
   .cr[data-theme] as in the mock-up, because the theme button (global-scripts.js) flips only
   the former - a .cr selector would keep the wrong wordmark until the next page load. */

.cr{
  --ss-max:1120px;      /* content width - narrower than the panel's so a line stays short */
  --ss-sec:72px;        /* vertical space between sections */
  --ss-sec-s:44px;      /* the same, on a phone */
  --ss-t-hero:44px;     /* hero heading */
  --ss-t-hero-s:30px;   /* hero heading, on a phone */
  --ss-t-h2:28px;       /* section heading */
  --ss-t-h2-s:22px;     /* section heading, on a phone (= the panel's page title) */
  --ss-t-lead:17px;     /* hero sub-line (= the panel's card title) */
  --ss-t-price:32px;    /* package price */
  --ss-gap:14px;        /* gap between cards */
  --ss-r-phone:22px;    /* the phone frame around the mobile screenshot */
  --ss-r-phone-l:24px;  /* the same frame, drawn larger in the "Telefonda" section */
  --ss-r-phone-s:16px;  /* the same frame, on a phone */
}
/* Wide and ultra-wide screens (1920, 2560, 3440): the column widens so the page does not sit as
   a narrow strip in the middle; the line length inside a card stays short either way. */
@media (min-width:1800px){ .cr{ --ss-max:1280px; } }
@media (min-width:2400px){ .cr{ --ss-max:1480px; } }

/* ── Page ─────────────────────────────────────────────── */
.tapp-ss{
  /* The anonymous shell's own bar height (tenant-app.css declares it on .tapp-sf-shell, which
     this page does not sit in); the --rl-* scale reaches here through tenant-app.css's own list. */
  --sf-bar:64px;
  container-type:inline-size;
  background:var(--bg);
  color:var(--body);
  font-size:14px;
  line-height:1.55;
}
/* :not(.tapp-btn) - a link drawn as a button keeps tenant-app.css's own colours; the mock-up's
   bare `a` rule sat below the button rule in specificity there, and here it would not. */
.tapp-ss a:not(.tapp-btn){ color:var(--acc-text); text-decoration:none; }
.tapp-ss a:not(.tapp-btn):hover{ color:var(--head); }
.tapp-ss-hero.is-text{ grid-template-columns:minmax(0,1fr); max-width:calc(var(--ss-max) * .7); margin-left:auto; margin-right:auto; }
.tapp-ss-app.is-text{ grid-template-columns:minmax(0,1fr); }
.tapp-ss .tapp-btn{ min-height:var(--rl-tap); text-decoration:none; }
.tapp-ss .tapp-btn-secondary:hover{ color:var(--head); }
.tapp-ss-wrap{ max-width:var(--ss-max); margin:0 auto; padding:0 28px; }
.tapp-ss-sec{ padding-top:var(--ss-sec); }
.tapp-ss-sec:last-of-type{ padding-bottom:var(--ss-sec); }
.tapp-ss-lbl{
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px;
}
.tapp-ss-h2{
  font-size:var(--ss-t-h2); font-weight:700; color:var(--head);
  letter-spacing:-.6px; line-height:1.2; margin:0; text-wrap:balance;
}
.tapp-ss-lead{ font-size:15px; color:var(--muted); margin:10px 0 0; max-width:620px; text-wrap:pretty; }
.tapp-ss-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:24px; }

/* ── Top bar ──────────────────────────────────────────── */
.tapp-ss-bar{ border-bottom:1px solid var(--border); position:relative; }
.tapp-ss-bar-in{ display:flex; align-items:center; gap:8px; min-height:var(--sf-bar); }
.tapp-ss-logo{ display:flex; align-items:center; margin-right:18px; flex:0 0 auto; }
.tapp-ss-logo img{ height:26px; width:auto; display:block; }
.tapp-ss-logo .is-light{ display:none; }
html[data-bs-theme="light"] .tapp-ss-logo .is-dark{ display:none; }
html[data-bs-theme="light"] .tapp-ss-logo .is-light{ display:block; }
.tapp-ss-nav{ display:flex; align-items:center; gap:2px; }
.tapp-ss-nav a, .tapp-ss-navlink{
  display:inline-flex; align-items:center; min-height:var(--rl-tap); padding:0 12px; white-space:nowrap;
  border-radius:var(--rl-r-ctl); color:var(--body); font-size:var(--rl-t-row); font-weight:600;
  transition:background 120ms ease, color 120ms ease;
}
.tapp-ss .tapp-ss-nav a, .tapp-ss .tapp-ss-navlink{ color:var(--body); }
.tapp-ss .tapp-ss-nav a:hover, .tapp-ss .tapp-ss-navlink:hover{ background:var(--hover); color:var(--head); }
.tapp-ss .tapp-ss-nav a.is-active{ color:var(--head); background:var(--hover); }
.tapp-ss-bar-end{ display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; }
.tapp-ss-bar-end .tapp-btn{ white-space:nowrap; }
.tapp-ss-menu{ display:none; }
.tapp-ss-drop{
  display:none; flex-direction:column; gap:2px; padding:8px 12px 12px;
  border-top:1px solid var(--border); background:var(--bg);
}
.tapp-ss .tapp-ss-drop a{
  display:flex; align-items:center; gap:10px; min-height:var(--rl-tap); padding:0 10px;
  border-radius:var(--rl-r-ctl); color:var(--head); font-weight:600;
}
.tapp-ss-drop a:hover{ background:var(--hover); }
.tapp-ss-drop i{ width:16px; text-align:center; color:var(--muted); font-size:13px; }

/* ── Hero ─────────────────────────────────────────────── */
.tapp-ss-hero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:center; padding-top:64px; }
.tapp-ss-hero h1{
  font-size:var(--ss-t-hero); font-weight:800; color:var(--head);
  letter-spacing:-1.2px; line-height:1.1; margin:0; text-wrap:balance;
}
.tapp-ss-hero-sub{ font-size:var(--ss-t-lead); color:var(--body); margin:16px 0 0; line-height:1.55; text-wrap:pretty; }
.tapp-ss-hero-sub b{ color:var(--head); font-weight:700; }
.tapp-ss-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.tapp-ss-ctas .tapp-btn{ padding:0 20px; font-size:14px; }
.tapp-ss-ticks{ display:flex; flex-direction:column; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.tapp-ss-ticks li{ display:flex; align-items:center; gap:7px; font-size:var(--rl-t-row); color:var(--body); }
.tapp-ss-ticks i{ color:var(--ok); font-size:11px; }
.tapp-ss-from{ margin:18px 0 0; font-size:var(--rl-t-row); color:var(--muted); font-variant-numeric:tabular-nums; }
.tapp-ss-from b{ color:var(--head); }

/* Web + phone: the phone screenshot sits over the desktop one's bottom right corner.
   No shadow (the system's only shadow is the confirm dialog's); a 6px frame in the ground
   colour plus a hairline separates the two. */
.tapp-ss-shots{ position:relative; margin:0; padding:0 14% 9% 0; }
.tapp-ss-shots-web{
  display:block; width:100%; height:auto;
  border:1px solid var(--border); border-radius:var(--rl-r-card);
}
.tapp-ss-shots-mob{
  position:absolute; right:0; bottom:0; width:30%; height:auto; display:block;
  border:6px solid var(--bg); border-radius:var(--ss-r-phone); outline:1px solid var(--border);
  outline-offset:0; background:var(--bg);
}
.tapp-ss-shots .is-light{ display:none; }
html[data-bs-theme="light"] .tapp-ss-shots .is-dark{ display:none; }
html[data-bs-theme="light"] .tapp-ss-shots .is-light{ display:block; }

/* ── Package strip under the sector picker (13c) ─────────
   Scrolls inside its own track only; the page never scrolls sideways. The next card peeks in
   from the edge, which is what says "there is more". */
.tapp-ss-car{ display:flex; flex-direction:column; gap:14px; }
.tapp-ss-car-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tapp-ss-car-head .tapp-ss-lbl{ margin:0; }
.tapp-ss-car-nav{ display:flex; gap:6px; }
.tapp-ss-car-nav[hidden]{ display:none; }
.tapp-ss-car-track{
  display:flex; gap:var(--ss-gap); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-left:0; padding-bottom:6px; scrollbar-width:thin;
}
.tapp-ss-car-card{
  flex:1 0 300px; scroll-snap-align:start; display:flex; flex-direction:column; gap:10px;
  padding:20px; border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); min-width:0;
}
.tapp-ss-car-card .tapp-ss-car-sec{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); }
.tapp-ss-car-card h3{ margin:0; font-size:var(--rl-t-card); font-weight:700; color:var(--head); }
.tapp-ss-car-card p{ margin:0; font-size:var(--rl-t-note); color:var(--muted); min-height:2.9em; text-wrap:pretty; }
.tapp-ss-car-card .tapp-btn{ width:100%; margin-top:auto; }
.tapp-ss-car-mods{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
/* Coloured module tiles: the menu's filled tile, drawn small; the glyph is the ground colour. */
.tapp-ss-car-ico{
  width:26px; height:26px; flex:0 0 26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-xs); font-size:11px; color:var(--bg);
}
.tapp-ss-car-card .tapp-ss-car-sec .tapp-nav-icon{ width:26px; height:26px; flex:0 0 26px; font-size:11px; }
.tapp-ss-car-card.is-indigo{ border-top:3px solid var(--brand-indigo); }
.tapp-ss-car-card.is-green{ border-top:3px solid var(--brand-green); }
.tapp-ss-car-card.is-purple{ border-top:3px solid var(--brand-purple); }
.tapp-ss-car-card.is-pink{ border-top:3px solid var(--brand-pink); }
.tapp-ss-car-mods span{ font-size:var(--rl-t-note); color:var(--muted); }
/* What a package holds, named: the groups it opens, or what it adds on the smaller package. */
.tapp-ss-car-inc{ display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px solid var(--border); }
.tapp-ss-car-inc > span{ font-size:var(--rl-t-note); color:var(--muted); }
.tapp-ss-car-inc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.tapp-ss-car-inc li{ display:flex; align-items:center; gap:10px; font-size:var(--rl-t-row); color:var(--head); font-weight:600; }
.tapp-ss-car-inc .tapp-nav-icon{ width:24px; height:24px; flex:0 0 24px; font-size:11px; }
/* A package not priced yet: "Fiyat yakında" in the price's place, a step quieter. */
.tapp-ss-price.is-soon b{ font-size:22px; letter-spacing:-.4px; color:var(--acc-text); }
/* The card whose modules are the ones ticked in "Kendin oluştur". */
.tapp-ss-car-card.is-picked, .tapp-ss-plan.is-picked{ border-color:var(--acc-solid); background:var(--acc-soft); }
.tapp-ss-car-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:var(--rl-t-note); color:var(--muted); }
.tapp-ss-car-foot a{ display:inline-flex; align-items:center; gap:7px; min-height:var(--rl-tap); font-weight:600; font-size:var(--rl-t-row); }

/* ── "Kendin oluştur" ─────────────────────────────────────
   The card beside the packages: one row per sold module to tick, the platform's own groups
   listed as included. In the strip it is a card like the others; on the price list a plan. */
/* position:relative keeps the screen-reader legend inside the card; left to the page, the
   absolutely placed legend escaped the strip's scroller and widened the page. */
.tapp-ss-build{
  position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; min-width:0;
  border:1px dashed var(--acc-solid); border-radius:var(--rl-r-card); background:var(--card);
  transition:background 240ms ease;
}
.tapp-ss-car-track > .tapp-ss-build{ flex:1 0 300px; scroll-snap-align:start; }
.tapp-ss-plans > .tapp-ss-build{ flex:1 1 240px; max-width:340px; }
.tapp-ss-build.is-flash{ animation:tapp-ss-flash 700ms ease; }
@keyframes tapp-ss-flash{ from{ background:var(--acc-soft); } to{ background:var(--card); } }
.tapp-ss-build .tapp-ss-car-sec{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); }
.tapp-ss-build .tapp-ss-car-sec .tapp-nav-icon{ width:26px; height:26px; flex:0 0 26px; font-size:11px; }
.tapp-ss-build h3{ margin:0; font-size:var(--rl-t-card); font-weight:700; color:var(--head); }
.tapp-ss-build-lead{ margin:0; font-size:var(--rl-t-note); color:var(--muted); text-wrap:pretty; }
.tapp-ss-build-opts{ display:flex; flex-direction:column; gap:6px; margin:0; padding:0; border:none; min-width:0; }
.tapp-ss-build-opt{
  display:flex; align-items:center; gap:10px; min-height:var(--rl-tap); padding:0 10px;
  border:1px solid var(--border); border-radius:var(--rl-r-ctl); background:var(--bg);
  font-size:var(--rl-t-row); color:var(--head); font-weight:600; cursor:pointer; position:relative;
  transition:border-color 120ms ease, background 120ms ease;
}
.tapp-ss-build-opt .tapp-nav-icon{ width:24px; height:24px; flex:0 0 24px; font-size:11px; }
.tapp-ss-build-name{ flex:1 1 auto; min-width:0; }
.tapp-ss-build-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.tapp-ss-build-tick{
  width:20px; height:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r-xs); font-size:10px; color:transparent;
}
.tapp-ss-build-opt:has(input:checked){ border-color:var(--acc-solid); background:var(--acc-soft); }
.tapp-ss-build-opt:has(input:checked) .tapp-ss-build-tick{ background:var(--acc-solid); border-color:var(--acc-solid); color:var(--bg); }
.tapp-ss-build-opt:has(input:focus-visible){ outline:1px solid var(--acc-solid); outline-offset:1px; }
.tapp-ss-build-opt.is-included{ cursor:default; border-style:dashed; }
.tapp-ss-build-opt.is-included small{ font-size:var(--rl-t-note); color:var(--muted); font-weight:400; white-space:nowrap; }
.tapp-ss-build-foot{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--border); }
.tapp-ss-build-count{ font-size:var(--rl-t-note); color:var(--muted); font-variant-numeric:tabular-nums; }
.tapp-ss-build-foot .tapp-btn{ width:100%; }
.tapp-ss-build-note{ font-size:var(--rl-t-note); color:var(--muted); line-height:1.5; text-wrap:pretty; }

/* ── Sector picker ────────────────────────────────────── */
.tapp-ss-pick-q{ margin:0 0 12px; font-size:var(--rl-t-card); font-weight:700; color:var(--head); }
.tapp-ss-pick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--ss-gap); }
.tapp-ss .tapp-ss-pick-card{
  display:flex; align-items:center; gap:14px; min-height:76px; padding:16px 18px; text-align:left;
  border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); color:var(--body);
  font:inherit; cursor:pointer; transition:background 120ms ease, border-color 120ms ease;
}
.tapp-ss .tapp-ss-pick-card:hover{ background:var(--hover); color:var(--body); }
.tapp-ss-pick-card.is-active{ border-color:var(--acc-solid); background:var(--acc-soft); }
.tapp-ss-pick-card:focus-visible{ outline:none; border-color:var(--acc-solid); }
.tapp-ss-pick-card .tapp-nav-icon{ width:40px; height:40px; flex:0 0 40px; font-size:16px; border-radius:var(--r-ctl); }
.tapp-ss-pick-text{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.tapp-ss-pick-text b{ font-size:16px; color:var(--head); }
.tapp-ss-pick-text small{ font-size:var(--rl-t-note); color:var(--muted); }
.tapp-ss-pick-mark{ font-size:18px; color:var(--muted); flex:0 0 auto; }
.tapp-ss-pick-card.is-active .tapp-ss-pick-mark{ color:var(--acc-text); }
.tapp-ss-pick-body{ margin-top:16px; }

/* ── Module groups ────────────────────────────────────── */
.tapp-ss-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--ss-gap); }
.tapp-ss-group{
  display:flex; flex-direction:column; gap:12px; padding:22px;
  border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); min-width:0;
}
.tapp-ss-group-top{ display:flex; align-items:center; gap:10px; }
.tapp-ss-group-top .tapp-nav-icon{ width:var(--rl-tile); height:var(--rl-tile); flex:0 0 var(--rl-tile); font-size:14px; }
.tapp-ss-group-name{ font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); }
.tapp-ss-group h3{ font-size:20px; font-weight:700; color:var(--head); letter-spacing:-.4px; margin:0; }
.tapp-ss-group p{ margin:0; color:var(--body); font-size:var(--rl-t-row); line-height:1.6; text-wrap:pretty; }
.tapp-ss-mods{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; padding:0; list-style:none; }
.tapp-ss-mods li{
  display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 11px;
  border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg);
  font-size:var(--rl-t-note); color:var(--head); font-weight:600;
}
.tapp-ss-mods .tapp-nav-subicon{ width:auto; flex:0 0 auto; font-size:11px; opacity:1; }
.tapp-ss-more{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px; font-size:var(--rl-t-row); color:var(--muted); }

/* ── On the phone ─────────────────────────────────────── */
.tapp-ss-app{
  display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:40px; align-items:center;
  padding:28px 32px; border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card);
}
.tapp-ss-app-list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.tapp-ss-app-list li{ display:flex; gap:14px; align-items:flex-start; }
.tapp-ss-app-list i{
  flex:0 0 36px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--rl-r-ctl); color:var(--bg); font-size:14px;
}
.tapp-ss-app-list li:nth-child(1) i{ background:var(--brand-indigo); }
.tapp-ss-app-list li:nth-child(2) i{ background:var(--brand-cyan); }
.tapp-ss-app-list li:nth-child(3) i{ background:var(--brand-pink); }
.tapp-ss-app-list span{ display:flex; flex-direction:column; gap:2px; font-size:var(--rl-t-row); color:var(--muted); line-height:1.5; }
.tapp-ss-app-list b{ color:var(--head); font-size:14px; }
.tapp-ss-app-phone img{
  display:block; width:100%; height:auto;
  border:6px solid var(--bg); border-radius:var(--ss-r-phone-l); outline:1px solid var(--border); background:var(--bg);
}
.tapp-ss-app-phone .is-light{ display:none; }
html[data-bs-theme="light"] .tapp-ss-app-phone .is-dark{ display:none; }
html[data-bs-theme="light"] .tapp-ss-app-phone .is-light{ display:block; }

/* ── How it works ─────────────────────────────────────── */
.tapp-ss-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none;
  border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); }
.tapp-ss-steps li{ display:flex; flex-direction:column; gap:8px; padding:22px; border-left:1px solid var(--border); min-width:0; }
.tapp-ss-steps li:first-child{ border-left:none; }
/* Step numbers in the menu tiles' colour set: the glyph is the ground colour (the tapp-nav-icon rule). */
.tapp-ss-step-n{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:var(--r-pill); color:var(--bg); font-size:14px; font-weight:800; font-variant-numeric:tabular-nums;
}
.tapp-ss-steps li:nth-child(1) .tapp-ss-step-n{ background:var(--brand-indigo); }
.tapp-ss-steps li:nth-child(2) .tapp-ss-step-n{ background:var(--brand-purple); }
.tapp-ss-steps li:nth-child(3) .tapp-ss-step-n{ background:var(--brand-cyan); }
.tapp-ss-steps li:nth-child(4) .tapp-ss-step-n{ background:var(--brand-green); }
.tapp-ss-steps h3{ font-size:15px; font-weight:700; color:var(--head); margin:4px 0 0; }
.tapp-ss-steps p{ margin:0; font-size:var(--rl-t-row); color:var(--muted); line-height:1.55; text-wrap:pretty; }

/* ── Last call ────────────────────────────────────────── */
.tapp-ss-final{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:32px; border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card);
}
.tapp-ss-final h2{ font-size:var(--ss-t-h2); font-weight:700; color:var(--head); letter-spacing:-.6px; margin:0; }
.tapp-ss-final p{ margin:6px 0 0; color:var(--muted); font-size:var(--rl-t-row); }

/* ── Footer (required by the payment provider's merchant review) ── */
.tapp-ss-foot{ border-top:1px solid var(--border); margin-top:var(--ss-sec); padding:36px 0 28px; background:var(--side); }
.tapp-ss-foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:28px; }
.tapp-ss-foot h2{ font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin:0 0 10px; line-height:1.55; }
.tapp-ss-foot address{ font-style:normal; display:flex; flex-direction:column; gap:4px; font-size:var(--rl-t-note); color:var(--body); line-height:1.6; margin:0; }
.tapp-ss-foot address b{ color:var(--head); font-size:var(--rl-t-row); }
.tapp-ss-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.tapp-ss .tapp-ss-foot li a{ display:flex; align-items:center; min-height:36px; font-size:var(--rl-t-row); color:var(--body); }
.tapp-ss .tapp-ss-foot li a:hover{ color:var(--head); }
.tapp-ss-foot-mono{ font-variant-numeric:tabular-nums; }
.tapp-ss-band{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--border); font-size:var(--rl-t-note); color:var(--muted); }
.tapp-ss-band img{ height:24px; width:auto; max-width:100%; display:block; }
.tapp-ss-band .is-light{ display:none; }
html[data-bs-theme="light"] .tapp-ss-band .is-dark{ display:none; }
html[data-bs-theme="light"] .tapp-ss-band .is-light{ display:block; }

/* ── Price list page ──────────────────────────────────── */
.tapp-ss-phead{ padding-top:48px; display:flex; flex-direction:column; gap:20px; }
.tapp-ss-phead h1{ font-size:36px; font-weight:800; color:var(--head); letter-spacing:-.9px; margin:0; line-height:1.2; }
.tapp-ss-phead p{ margin:8px 0 0; color:var(--body); font-size:15px; max-width:640px; text-wrap:pretty; }
.tapp-ss-plans-sec{ padding-top:28px; }

/* One package or four: a card flexes between 240 and 340px and the row is centred. */
.tapp-ss-plans{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--ss-gap); }
.tapp-ss-plan{
  flex:1 1 240px; max-width:340px; display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); min-width:0;
}
.tapp-ss-plan-top{ display:flex; flex-direction:column; gap:6px; padding:22px 22px 18px; border-bottom:1px solid var(--border); }
.tapp-ss-plan-name{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.tapp-ss-plan-name h3{ font-size:var(--rl-t-card); font-weight:700; color:var(--head); margin:0; }
.tapp-ss-plan-for{ font-size:var(--rl-t-note); color:var(--muted); min-height:2.9em; text-wrap:pretty; }
.tapp-ss-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-top:10px; font-variant-numeric:tabular-nums; }
.tapp-ss-price b{ font-size:var(--ss-t-price); font-weight:800; color:var(--head); letter-spacing:-.8px; line-height:1.1; }
.tapp-ss-price > span{ font-size:var(--rl-t-note); color:var(--muted); }
.tapp-ss-price-sub{ font-size:var(--rl-t-note); color:var(--body); font-variant-numeric:tabular-nums; }
.tapp-ss-plan-cta{ padding:16px 22px; border-bottom:1px solid var(--border); }
.tapp-ss-plan-cta .tapp-btn{ width:100%; }
.tapp-ss-plan-inc{ display:flex; flex-direction:column; gap:10px; padding:18px 22px 22px; }
.tapp-ss-plan-inc > span{ font-size:var(--rl-t-note); color:var(--muted); }
.tapp-ss-plan-inc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tapp-ss-plan-inc li{ display:flex; align-items:center; gap:10px; font-size:var(--rl-t-row); color:var(--head); }
.tapp-ss-plan-inc .tapp-nav-subicon{ width:14px; flex:0 0 14px; font-size:12px; opacity:1; text-align:center; }

.tapp-ss-addons{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--ss-gap); }
.tapp-ss-addon{ display:flex; flex-direction:column; gap:10px; padding:18px; border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); min-width:0; }
.tapp-ss-addon-top{ display:flex; align-items:center; gap:10px; }
.tapp-ss-addon-top b{ font-size:14px; color:var(--head); }
.tapp-ss-addon p{ margin:0; font-size:var(--rl-t-note); color:var(--muted); line-height:1.55; flex:1 1 auto; }
.tapp-ss-addon-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border); font-variant-numeric:tabular-nums; }
.tapp-ss-addon-foot b{ font-size:15px; color:var(--head); }
.tapp-ss-addon-foot small{ font-size:var(--rl-t-note); color:var(--muted); font-weight:400; }
.tapp-ss-addon-foot a{ display:inline-flex; align-items:center; min-height:var(--rl-tap); font-size:var(--rl-t-row); font-weight:600; }

.tapp-ss-tax{
  display:flex; align-items:center; gap:10px; padding:12px 16px; margin-top:var(--ss-gap);
  border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--bg);
  font-size:var(--rl-t-row); color:var(--body);
}
.tapp-ss-tax i{ color:var(--muted); font-size:13px; }

/* Comparison table: grouped, each group opens and closes. On a phone each row becomes a card. */
.tapp-ss-cmp-wrap{ border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); overflow:hidden; }
.tapp-ss-cmp{ width:100%; border-collapse:collapse; font-size:var(--rl-t-row); table-layout:fixed; }
.tapp-ss-cmp th, .tapp-ss-cmp td{ padding:0 16px; height:44px; text-align:center; border-top:1px solid var(--border); }
.tapp-ss-cmp thead th{ background:var(--thead); border-top:none; color:var(--head); font-weight:700; font-size:var(--rl-t-row); }
.tapp-ss-cmp thead th:first-child, .tapp-ss-cmp td:first-child{ text-align:left; width:34%; }
.tapp-ss-cmp td{ color:var(--head); }
.tapp-ss-cmp td:first-child{ color:var(--body); }
.tapp-ss-cmp td:first-child > span{ display:inline-flex; align-items:center; gap:10px; }
.tapp-ss-cmp .tapp-nav-subicon{ width:14px; flex:0 0 14px; font-size:12px; opacity:1; text-align:center; }
.tapp-ss-yes{ color:var(--ok); }
.tapp-ss-no{ color:var(--border); }
.tapp-ss-addon-cell{ font-size:var(--rl-t-note); color:var(--muted); }
.tapp-ss-cmp-grp td{ padding:0; background:var(--bg); }
.tapp-ss-cmp-toggle{
  display:flex; align-items:center; gap:10px; width:100%; min-height:var(--rl-tap); padding:0 16px;
  border:none; background:transparent; color:var(--head); font:inherit; font-size:var(--rl-t-row); font-weight:700;
  text-align:left; cursor:pointer; transition:background 120ms ease;
}
.tapp-ss-cmp-toggle:hover{ background:var(--hover); }
.tapp-ss-cmp-toggle:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px var(--acc-solid); }
.tapp-ss-cmp-toggle .tapp-nav-icon{ width:22px; height:22px; flex:0 0 22px; font-size:10px; }
.tapp-ss-cmp-toggle small{ font-weight:400; color:var(--muted); font-size:var(--rl-t-note); }
.tapp-ss-cmp-toggle .fa-chevron-down{ margin-left:auto; font-size:11px; color:var(--muted); transition:transform 120ms ease; }
.tapp-ss-cmp-toggle[aria-expanded="false"] .fa-chevron-down{ transform:rotate(-90deg); }
.tapp-ss-cmp tr.is-closed{ display:none; }
/* "Var / Yok" for a screen reader - the mark is not the only carrier. */
.tapp-ss-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* FAQ: native <details>, no script. */
.tapp-ss-faq{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:32px; }
.tapp-ss-faq-list{ border:1px solid var(--border); border-radius:var(--rl-r-card); background:var(--card); }
.tapp-ss-faq-list details{ border-top:1px solid var(--border); }
.tapp-ss-faq-list details:first-child{ border-top:none; }
.tapp-ss-faq-list summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; padding:0 18px;
  cursor:pointer; list-style:none; color:var(--head); font-weight:600; font-size:14px; transition:background 120ms ease;
}
.tapp-ss-faq-list summary::-webkit-details-marker{ display:none; }
.tapp-ss-faq-list summary:hover{ background:var(--hover); }
.tapp-ss-faq-list summary:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px var(--acc-solid); }
.tapp-ss-faq-list summary i{ font-size:11px; color:var(--muted); transition:transform 120ms ease; flex:0 0 auto; }
.tapp-ss-faq-list details[open] summary i{ transform:rotate(180deg); }
.tapp-ss-faq-list details > div{ padding:0 18px 16px; color:var(--body); font-size:var(--rl-t-row); line-height:1.65; text-wrap:pretty; }

/* ── States ───────────────────────────────────────────── */
.tapp-ss .tapp-empty{ padding:40px 24px; }
.tapp-ss .tapp-empty .tapp-btn{ margin-top:8px; }
.tapp-ss .tapp-alert{ align-items:flex-start; }
.tapp-ss .tapp-alert-text{ line-height:1.55; }
.tapp-ss-state-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

/* ── 768 ──────────────────────────────────────────────── */
@container (max-width:960px){
  .tapp-ss-hero{ grid-template-columns:minmax(0,1fr); gap:32px; padding-top:48px; }
  .tapp-ss-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tapp-ss-steps li:nth-child(3){ border-left:none; }
  .tapp-ss-steps li:nth-child(n+3){ border-top:1px solid var(--border); }
  .tapp-ss-faq{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .tapp-ss-app{ grid-template-columns:minmax(0,1fr) 200px; gap:28px; padding:24px; }
}

/* ── The bar folds into its menu before its items run out of room ── */
@container (max-width:760px){
  .tapp-ss-nav, .tapp-ss-bar-end .tapp-ss-navlink{ display:none; }
  .tapp-ss-bar-end .tapp-ss-menu{ display:inline-flex; }
  .tapp-ss-drop.is-open{ display:flex; }
  .tapp-ss-foot-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .tapp-ss-foot-grid > :first-child{ grid-column:1 / -1; }
}

/* ── 390 ──────────────────────────────────────────────── */
@container (max-width:520px){
  .tapp-ss-wrap{ padding:0 16px; }
  .tapp-ss-sec{ padding-top:var(--ss-sec-s); }
  .tapp-ss-h2{ font-size:var(--ss-t-h2-s); letter-spacing:-.4px; }
  .tapp-ss-final h2{ font-size:var(--ss-t-h2-s); }
  .tapp-ss-bar-end #ArcubyThemeToggle{ display:none; }
  .tapp-ss-logo{ margin-right:0; }
  .tapp-ss-logo img{ height:22px; }
  .tapp-ss-bar-end .tapp-btn{ padding:0 12px; }
  .tapp-ss-hero{ padding-top:32px; gap:24px; }
  .tapp-ss-hero h1{ font-size:var(--ss-t-hero-s); letter-spacing:-.6px; }
  .tapp-ss-hero-sub{ font-size:15px; }
  .tapp-ss-ctas .tapp-btn{ flex:1 1 100%; }
  .tapp-ss-ticks{ flex-direction:column; gap:6px; }
  .tapp-ss-shots{ padding:0 10% 12% 0; }
  .tapp-ss-shots-mob{ width:36%; border-width:4px; border-radius:var(--ss-r-phone-s); }
  .tapp-ss-car-card, .tapp-ss-car-track > .tapp-ss-build{ flex-basis:82%; }
  /* One card at a time on a phone: each keeps its own height rather than the tallest one's. */
  .tapp-ss-car-track{ align-items:flex-start; }
  .tapp-ss-plans > .tapp-ss-build{ max-width:none; flex-basis:100%; }
  .tapp-ss-app{ grid-template-columns:minmax(0,1fr); padding:20px; gap:24px; }
  .tapp-ss-app-phone{ max-width:240px; margin:0 auto; }
  .tapp-ss-groups{ grid-template-columns:minmax(0,1fr); }
  .tapp-ss-group{ padding:18px; }
  .tapp-ss-steps{ grid-template-columns:minmax(0,1fr); }
  .tapp-ss-steps li{ border-left:none; padding:18px; }
  .tapp-ss-steps li:nth-child(n+2){ border-top:1px solid var(--border); }
  .tapp-ss-final{ padding:22px; }
  .tapp-ss-final .tapp-btn{ width:100%; }
  .tapp-ss-foot-grid{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .tapp-ss-band{ flex-direction:column; align-items:flex-start; }
  .tapp-ss-phead{ padding-top:28px; }
  .tapp-ss-phead h1{ font-size:var(--ss-t-hero-s); }
  .tapp-ss-plan{ max-width:none; flex-basis:100%; }
  .tapp-ss-plan-for{ min-height:0; }
  .tapp-ss-addons{ grid-template-columns:minmax(0,1fr); }
  /* Table to cards: each module row is a card, the packages become label/value pairs. */
  .tapp-ss-cmp, .tapp-ss-cmp tbody, .tapp-ss-cmp tr, .tapp-ss-cmp td{ display:block; width:auto; }
  .tapp-ss-cmp thead{ display:none; }
  .tapp-ss-cmp tr.is-closed{ display:none; }
  .tapp-ss-cmp tr.tapp-ss-cmp-row{ padding:10px 16px 12px; border-top:1px solid var(--border); }
  .tapp-ss-cmp td{ height:auto; border:none; padding:0; text-align:left; }
  .tapp-ss-cmp td:first-child{ width:auto; color:var(--head); font-weight:600; margin-bottom:6px; }
  .tapp-ss-cmp-row td:not(:first-child){ display:flex; justify-content:space-between; align-items:center; min-height:28px; font-size:var(--rl-t-note); }
  .tapp-ss-cmp-row td:not(:first-child)::before{ content:attr(data-label); color:var(--muted); }
  .tapp-ss-cmp-grp td{ border-top:1px solid var(--border); margin:0; }
  .tapp-ss-cmp-grp td:not(:first-child){ display:none; }
}