/* One screen per page (Dasha, 20 Oct): pricing, community, partners, support and contact fit the window with no scrolling at
   1366 x 768 and up: the header, one heading, one line under it, the tiles or the form, the actions, the slim footer.
   No paragraphs (Drushya: one heading, a subtitle and an action button). Loaded after glass.css and header.css; the background
   is assets/bg.css, so nothing here paints an opaque band over it. */
body.one { display: flex; flex-direction: column; min-height: 100svh; }
body.one > main { flex: 1; display: flex; flex-direction: column; justify-content: center; width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1180px;
  margin: 0 auto; padding: clamp(20px, 4svh, 48px) 0; }
body.one .ijf { margin-top: 0; }

/* the heading: one line and one line under it */
.one-head { text-align: center; margin: 0 auto clamp(18px, 3.4svh, 36px); max-width: 900px; }
.one-head h1 { margin: 0; font: 500 clamp(34px, 4.4vw, 56px)/1.04 var(--sans); letter-spacing: -.045em; color: var(--ink); }
.one-head h1 em { font: italic 400 1.1em/1 var(--serif); letter-spacing: -.01em; color: var(--vio); }
.one-head p { margin: 14px auto 0; font: 400 17px/1.45 var(--sans); color: var(--ink2); max-width: 34em; }
.one-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: clamp(18px, 3.4svh, 34px); }
.one-acts .lk { font: 500 14.5px/1 var(--sans); color: #5053D0; text-decoration: none; }
.one-acts .lk:hover { text-decoration: underline; text-underline-offset: 4px; }
body.one .btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

/* the tiles: the card of the header's panels, a little larger */
.one-tiles { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.one-tiles a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border-radius: 20px; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(25, 24, 38, .08); box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 18px 44px -24px rgba(25, 24, 38, .24);
  transition: transform .25s, box-shadow .25s, background .25s; }
.one-tiles a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 24px 50px -24px rgba(25, 24, 38, .3); }
.one-tiles .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(110, 114, 242, .1); color: #6E72F2; }
.one-tiles b { display: block; font: 500 16.5px/1.25 var(--sans); letter-spacing: -.01em; }
.one-tiles small { display: block; margin-top: 4px; font: 400 13.5px/1.4 var(--sans); color: var(--ink2); }
.one-tiles .go { margin-top: auto; font: 500 13.5px/1 var(--sans); color: #5053D0; }
.one-tiles a:hover .go { text-decoration: underline; text-underline-offset: 4px; }
.one-tiles a:focus-visible { outline: 2px solid #6E72F2; outline-offset: 3px; }
/* the integrations page: the product's logo where the icon would be */
.one-tiles--logos .lg { display: flex; align-items: center; height: 44px; }
.one-tiles--logos .lg img { display: block; width: auto; height: auto; max-width: 190px; max-height: 24px; }
.one-tiles--logos .lg img.sym { max-height: 44px; }
@media (max-width: 760px) { .one-tiles.one-tiles--logos a { flex-direction: column; align-items: flex-start; gap: 10px; } .one-tiles--logos .lg { height: 36px; } .one-tiles--logos .lg img { max-width: 160px; max-height: 20px; } .one-tiles--logos .lg img.sym { max-height: 36px; } }

/* the dark plate: the heading in the brand colours, the line under it light grey */
.one-plate { display: flex; align-items: center; gap: 18px 32px; flex-wrap: wrap; margin-top: 14px; padding: clamp(20px, 3.4svh, 32px) clamp(22px, 3vw, 40px);
  border-radius: 24px; background: rgba(25, 24, 38, .96); color: #fff; box-shadow: 0 30px 70px -30px rgba(25, 24, 38, .45); }
.one-plate h2 { margin: 0; font: 500 clamp(24px, 2.6vw, 34px)/1.1 var(--sans); letter-spacing: -.035em;
  background: linear-gradient(90deg, #9da0ff 0%, #c9bbff 55%, #f0c9ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.one-plate p { margin: 6px 0 0; font: 400 15px/1.45 var(--sans); color: rgba(255, 255, 255, .66); }
.one-plate .one-acts { margin: 0 0 0 auto; }
body.one .one-plate .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: none; }
body.one .one-plate .btn:hover { background: rgba(255, 255, 255, .12); }
body.one .one-plate .btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
body.one .one-plate .btn--primary:hover { background: #ebebff; border-color: #ebebff; }

/* pricing: the live page's way (ijewel3d.com/pricing): Personal or Organization, Monthly or Annual, a slider of how many models
   that marks the plan that fits, four plans, then Compare features and Add-ons over the page. body.one before each rule, so these
   win over the plan styles of site.css and glass.css.The plan card and the billing toggle
   also serve the plan quiz's result (plan-quiz.html, inside .pc-set): :is() keeps the weight of body.one .one-price for both. */
body.one .seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 13px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .92); }
body.one .seg button { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 36px; padding: 0 15px; border: 0; border-radius: 10px;
  background: none; font: 500 13.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); cursor: pointer; transition: background .2s, color .2s; }
body.one .seg button:hover { color: var(--ink); }
body.one .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* billing: a toggle between two labels, so it reads apart from the Personal / Organization switch (Dasha, 21 Oct) */
:is(body.one, .pc-set) .bill-tog { display: inline-flex; align-items: center; gap: 10px; }
:is(body.one, .pc-set) .bill-tog .bt-l { -webkit-appearance: none; appearance: none; margin: 0; padding: 4px 0; border: 0; background: none; font: 400 14px/1 var(--sans); color: var(--ink2); cursor: pointer; transition: color .25s cubic-bezier(.22, 1, .36, 1); }
:is(body.one, .pc-set) .bill-tog .bt-l.on { color: var(--ink); font-weight: 500; }
:is(body.one, .pc-set) .bill-tog .off { margin-left: 4px; padding: 3px 7px; border-radius: 999px; background: rgba(110, 114, 242, .12); font: 500 11.5px/1 var(--sans); color: #5053D0; }
:is(body.one, .pc-set) .bill-tog .bt-sw { -webkit-appearance: none; appearance: none; position: relative; width: 44px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(25, 24, 38, .16); cursor: pointer; transition: background .3s cubic-bezier(.22, 1, .36, 1); }
:is(body.one, .pc-set) .bill-tog .bt-sw[aria-checked="true"] { background: #6E72F2; }
:is(body.one, .pc-set) .bill-tog .bt-sw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(25, 24, 38, .25); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
:is(body.one, .pc-set) .bill-tog .bt-sw[aria-checked="true"] i { transform: translateX(18px); }
:is(body.one, .pc-set) .bill-tog button:focus-visible { outline: 2px solid #6E72F2; outline-offset: 3px; border-radius: 999px; }
body.one .seg button:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }

/* the slider: the question, the value in a bubble over the thumb, the stops as labels, and the plan it picks (Dasha, 21 Oct). The
   thumb's centre is --pad + (100% - 2 × --pad) × the value's fraction of the track (the range is that wide plus a thumb, and as
   far out), so the bubble takes the same sum in CSS and stays on the thumb at any width, before or after the fonts (22 Oct) */
/* the slider on the page itself, no card round it and no "Your plan" box (Dasha, 22 Oct): the cards under it show the plan; the
   top keeps room for the count over the thumb */
body.one .pr-slide { display: flex; align-items: center; gap: 28px; margin: 0 0 clamp(12px, 2.2svh, 22px); padding: 36px 4px 6px; }
body.one .pr-slide label { flex: none; margin-top: -22px; font: 500 15px/1.2 var(--sans); color: var(--ink); }
body.one .pr-slide .track { position: relative; flex: 1; min-width: 0; --pad: 6%; }
body.one .pr-slide .bub { position: absolute; top: -26px; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--f, 0)); transform: translateX(-50%); padding: 4px 9px; border-radius: 8px; background: #191826; color: #fff; font: 500 12px/1 var(--sans); white-space: nowrap; pointer-events: none;
  transition: left .18s cubic-bezier(.22, 1, .36, 1); }  /* short: a drag must not leave it behind the thumb */
body.one .pr-slide .bub::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: #191826; transform: rotate(45deg); border-radius: 1px; }
body.one .pr-slide input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: calc(100% - 2 * var(--pad) + 18px); margin: 0 calc(var(--pad) - 9px); height: 20px; background: none; cursor: pointer; --p: 42.86%; }
body.one .pr-slide input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #6E72F2 var(--p), rgba(25, 24, 38, .12) var(--p)); }
body.one .pr-slide input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(25, 24, 38, .12); }
body.one .pr-slide input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: #6E72F2; }
body.one .pr-slide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid #6E72F2;
  box-shadow: 0 2px 8px rgba(110, 114, 242, .35); }
body.one .pr-slide input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #6E72F2; box-shadow: 0 2px 8px rgba(110, 114, 242, .35); }
body.one .pr-slide input[type="range"]:focus-visible { outline: 2px solid #6E72F2; outline-offset: 4px; border-radius: 6px; }
body.one .pr-slide .stops { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 2px calc(var(--pad) - 6.25%) 0; }
body.one .pr-slide .stops button { -webkit-appearance: none; appearance: none; margin: 0; padding: 6px 0 4px; border: 0; background: none; font: 400 13px/1.2 var(--sans); color: var(--ink2); cursor: pointer; transition: color .25s cubic-bezier(.22, 1, .36, 1); }
body.one .pr-slide .stops button:hover { color: var(--ink); }
body.one .pr-slide .stops button.on { color: #5053D0; font-weight: 500; }
/* a change of ladder (pricing.html, swapIn): the stage's height tweens while the lists cross-fade; the top edge stays put */
.swap-stage { transition: height .45s cubic-bezier(.22, 1, .36, 1); }
.swap-stage.is-busy { clip-path: inset(0); }  /* clips the fading list without making the stage a scroll ancestor: with overflow hidden the comparison table's sticky header jumped to the stage's top and showed as a white bar during the switch (Dasha, 29 Oct) */
.swap-stage > [data-ladder] { transition: opacity .2s cubic-bezier(.22, 1, .36, 1); }
.swap-stage > .is-out, .swap-stage > .is-in { opacity: 0; }
.price, .addons .ap { transition: opacity .16s cubic-bezier(.22, 1, .36, 1); }
.is-tick { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .swap-stage, .swap-stage > [data-ladder], .price, .addons .ap { transition: none; } }
:is(body.one .one-price, .pc-set) .plan { position: relative; display: flex; flex-direction: column; gap: 0; padding: 24px 22px 20px; border-radius: 20px; background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1.5px solid rgba(25, 24, 38, .08);
  box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 18px 44px -24px rgba(25, 24, 38, .2);
  transition: border-color .3s cubic-bezier(.22, 1, .36, 1), background .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1); }
:is(body.one .one-price, .pc-set) .plan:not(.is-rec) > *:not(.ctas) { opacity: .86; transition: opacity .25s; }  /* the live page greys the plans the slider did not pick (.86: secondary text stays at a readable contrast) */
:is(body.one .one-price, .pc-set) .plan:not(.is-rec):hover > *:not(.ctas) { opacity: 1; }  /* a hovered card in full colour and contrast (Dasha, 22 Oct); as specific as the rule above, so it wins */
:is(body.one .one-price, .pc-set) .plan.is-rec { border-color: #6E72F2; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 26px 56px -26px rgba(80, 83, 208, .4); }
/* a hover: any card lifts a little and takes a faint blue edge, softer than the slider's pick, which keeps its full blue (22 Oct) */
@media (hover: hover) and (pointer: fine) {
  :is(body.one .one-price, .pc-set) .plan:hover { transform: translateY(-4px); }
  :is(body.one .one-price, .pc-set) .plan:not(.is-rec):hover { border-color: rgba(110, 114, 242, .38); background: rgba(255, 255, 255, .84);
    box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 28px 56px -28px rgba(80, 83, 208, .3); }
  :is(body.one .one-price, .pc-set) .plan:not(.is-rec):hover .btn--primary { border-color: rgba(110, 114, 242, .45); }
}
@media (prefers-reduced-motion: reduce) { :is(body.one .one-price, .pc-set) .plan:hover { transform: none; } }
:is(body.one .one-price, .pc-set) .top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 24px; }
:is(body.one .one-price, .pc-set) .plan h3 { margin: 0 auto 0 0; font: 500 16px/1.2 var(--sans); letter-spacing: -.01em; }
:is(body.one .one-price, .pc-set) .rec, :is(body.one .one-price, .pc-set) .tag { padding: 4px 8px; border-radius: 8px; font: 500 11px/1 var(--sans); letter-spacing: .02em; text-transform: none; white-space: nowrap; }
:is(body.one .one-price, .pc-set) .rec { position: absolute; top: -11px; right: 16px; background: #6E72F2; color: #fff; opacity: 0; transform: translateY(4px); transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1); }  /* on the card's top edge, out of the flow: it appears without a reflow */
:is(body.one .one-price, .pc-set) .plan.is-rec .rec { opacity: 1; transform: none; }
:is(body.one .one-price, .pc-set) .tag { background: rgba(110, 114, 242, .12); color: #5053D0; }
:is(body.one .one-price, .pc-set) .price { margin: 14px 0 0; font: 500 30px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); }
:is(body.one .one-price, .pc-set) .price small { display: inline; margin-left: 4px; font: 400 13px/1 var(--sans); letter-spacing: 0; color: var(--ink2); }
:is(body.one .one-price, .pc-set) .desc { margin: 10px 0 0; min-height: 2.7em; font: 400 12.5px/1.35 var(--sans); color: var(--ink2); }
:is(body.one .one-price, .pc-set) .models { margin: 14px 0 0; padding: 11px 0; border-top: 1px solid rgba(25, 24, 38, .07); border-bottom: 1px solid rgba(25, 24, 38, .07);
  font: 500 13px/1.3 var(--sans); color: var(--ink); }
:is(body.one .one-price, .pc-set) .pl-lead { margin: 14px 0 0; font: 500 12px/1.3 var(--sans); color: var(--ink); }
:is(body.one .one-price, .pc-set) .plan ul { flex: 1; display: block; margin: 10px 0 20px; padding: 0; list-style: none; border: 0; }
:is(body.one .one-price, .pc-set) .plan li { position: relative; margin: 0; padding: 0 0 0 20px; border: 0; background: none; font: 400 12.5px/1.3 var(--sans); color: var(--ink2); }
:is(body.one .one-price, .pc-set) .plan li + li { margin-top: 7px; }
:is(body.one .one-price, .pc-set) .plan li::before { content: ''; position: absolute; left: 2px; top: 3px; width: 9px; height: 5px; border: solid #6E72F2; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
:is(body.one .one-price, .pc-set) .ctas { display: flex; gap: 8px; }
:is(body.one .one-price, .pc-set) .ctas:has(.ct-lk) { flex-direction: column; gap: 6px; }  /* one main button; Contact us under it, quiet */
:is(body.one .one-price, .pc-set) .ct-lk { align-self: center; padding: 2px 6px; font: 400 12.5px/1.3 var(--sans); color: var(--ink2); text-decoration: none; }
:is(body.one .one-price, .pc-set) .ct-lk:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
:is(body.one .one-price, .pc-set) .plan:not(.is-rec) .btn--primary { background: #fff; color: var(--ink); border-color: rgba(25, 24, 38, .12); box-shadow: none; }
:is(body.one .one-price, .pc-set) .ctas .btn { flex: 1; justify-content: center; min-height: 40px; padding: 0 12px; font-size: 14px; }
/* more below (Dasha, 22 Oct: no Add-ons and FAQ links, an arrow down instead): the round glass arrow of assets/snap.css */
@keyframes pr-down-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* contact (Dasha, 21 Oct): one centred column, only for a demo: the heading, one line, the form with the calendar, then the
   other ways to reach us as a row of small links */
/* contact (Book a demo) and support (Get help) share one look (Dasha, 21 Oct): one centred column, the heading and its line,
   the form card, a row of small links. The column sits in the middle of the window when it fits, and starts at the same
   distance under the header when it is taller (contact's calendar): auto margins in the flex main do both. */
body.one.plain { background: #fff; }

/* short windows: a smaller heading so the content keeps its place */
@media (max-height: 820px) and (min-width: 761px) {
  .one-head h1 { font-size: clamp(32px, 3.6vw, 46px); }
  .one-head p { margin-top: 10px; font-size: 16px; }
  .one-tiles a { padding: 18px; }
  :is(body.one .one-price, .pc-set) .plan { padding: 20px 20px 18px; }
  :is(body.one .one-price, .pc-set) .price { margin-top: 10px; font-size: 26px; }
  :is(body.one .one-price, .pc-set) .desc { margin-top: 8px; }
  :is(body.one .one-price, .pc-set) .models { margin-top: 10px; padding: 8px 0; }
  :is(body.one .one-price, .pc-set) .pl-lead { margin-top: 10px; }
  :is(body.one .one-price, .pc-set) .plan li + li { margin-top: 5px; }
  :is(body.one .one-price, .pc-set) .plan ul { margin: 8px 0 14px; }
  :is(body.one .one-price, .pc-set) .ctas .btn { min-height: 36px; }
  body.one .pr-slide { padding: 32px 4px 4px; margin-bottom: 12px; }
}
@media (max-width: 900px) { .one-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  body.one > main { justify-content: flex-start; padding-top: 36px; }  /* the title clear of the header on a phone (Dasha, 22 Oct) */
  .one-head p { font-size: 15.5px; }
  .one-tiles a { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .one-tiles .ic { flex: none; }
  .one-tiles .go { display: none; }
  .one-plate { flex-direction: column; align-items: flex-start; }
  .one-plate .one-acts { margin: 0; justify-content: flex-start; }
  :is(body.one .one-price, .pc-set) .plan { scroll-snap-align: start; }
  body.one .pr-slide { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 4px 10px; }
  body.one .pr-slide label { margin: 0 0 24px; text-align: center; }
  body.one .pr-slide .stops button { font-size: 0; }
  body.one .pr-slide .stops button::after { content: attr(data-s); font-size: 11px; }  /* a phone: 1k, 3k… so the eight stops fit */
  body.one .seg button { padding: 0 12px; }
  /* a phone: every field the full width, Company on its own row and the phone under it (Dasha, 29 Oct) */
}
@media (max-width: 560px) { .one-tiles { grid-template-columns: 1fr; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .one-tiles a { transition: none; } }

/* ---------- below the first screen (Dasha, 21 Oct): pricing and solutions may scroll on to the comparison, the logos and the
   FAQ, as on ijewel3d.com. The first screen keeps its one-window layout; the sections follow it. ---------- */
@media (prefers-reduced-motion: no-preference) { html:has(> body.one) { scroll-behavior: smooth; } }
.one-sec { width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: 1180px; margin: 0 auto; padding-top: clamp(80px, 11svh, 128px); scroll-margin-top: 24px; }
.one-sec:last-of-type { padding-bottom: clamp(80px, 11svh, 128px); }
body.one h2.one-h2 { max-width: none; margin: 0; text-align: center; font: 500 clamp(28px, 3.2vw, 40px)/1.1 var(--sans); letter-spacing: -.035em; color: var(--ink); }
.one-sub { margin: 10px auto 0; max-width: 34em; text-align: center; font: 400 15.5px/1.5 var(--sans); color: var(--ink2); }
body.one h2.one-cap { max-width: none; margin: 0; text-align: center; font: 500 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the (i) and its one floating hint */
.tip { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -3px 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #9a98aa; cursor: help; transition: color .2s, background .2s; }
.tip:hover, .tip:focus-visible, .tip[aria-describedby] { color: #5053D0; background: rgba(110, 114, 242, .1); }
.tip:focus-visible { outline: 2px solid #6E72F2; outline-offset: 1px; }
.tipbox { position: fixed; left: 0; top: 0; z-index: 90; max-width: min(260px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 12px; background: #191826; color: #fff;
  font: 400 12.5px/1.45 'Sora', system-ui, sans-serif; box-shadow: 0 14px 34px -14px rgba(25, 24, 38, .5); pointer-events: none;
  opacity: 0; transition: opacity .2s cubic-bezier(.22, 1, .36, 1); }
.tipbox.is-on { opacity: 1; }

/* Add-ons */
.addons-stage { margin-top: 32px; }  /* the margin on the stage, not the list: a tweened height then counts it */
.pr-add .addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pr-add .addons[hidden] { display: none; }
/* an add-on: an icon, its name, its price and one line (Dasha, 21 Oct: clearer, less text) */
.pr-add .addons li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic nm" "ic ap" "al al" "lk lk"; column-gap: 14px; row-gap: 4px; align-items: center; align-content: start; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, .66); border: 1px solid rgba(25, 24, 38, .08);
  box-shadow: 0 1px 2px rgba(25, 24, 38, .04), 0 24px 50px -34px rgba(25, 24, 38, .3); }
.pr-add .addons .aic { grid-area: ic; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(110, 114, 242, .12); color: #5053D0; }
.pr-add .addons b { grid-area: nm; align-self: end; font: 500 16px/1.25 var(--sans); }
.pr-add .addons .ap { grid-area: ap; align-self: start; font: 500 15px/1.2 var(--sans); color: var(--ink); }
.pr-add .addons .al { grid-area: al; margin-top: 12px; font: 400 13.5px/1.45 var(--sans); color: var(--ink2); }
.pr-add .addons .lk { grid-area: lk; justify-self: start; margin-top: 6px; font: 500 14px/1 var(--sans); color: #5053D0; text-decoration: none; }
.pr-add .addons .lk:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Trusted by: the live page's logo grid */
.one-trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 24px; place-items: center; max-width: 920px; margin: 30px auto 0; padding: 0; list-style: none; }
.one-trust img { display: block; height: calc(30px * var(--k)); width: auto; aspect-ratio: var(--a); object-fit: cover; filter: grayscale(1) contrast(1.2); opacity: .72; mix-blend-mode: multiply;
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1), filter .3s cubic-bezier(.22, 1, .36, 1); }
.one-trust img:hover { opacity: 1; filter: none; }
.one-trust .tm { margin: 26px 0 0; text-align: center; font: 400 11.5px/1.4 var(--sans); color: #6f6d80; }

/* FAQ: the live page's two columns of questions; an answer fades in */
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
.ofq-t { width: 100%; margin-top: 12px; border-collapse: collapse; font: 400 13px/1.3 var(--sans); color: var(--ink); }
.ofq-t th, .ofq-t td { padding: 8px 10px; border-bottom: 1px solid rgba(25, 24, 38, .07); text-align: left; }
.ofq-t th:last-child, .ofq-t td:last-child { text-align: right; }
.ofq-t th { font-weight: 500; } .ofq-t small { font-weight: 400; color: var(--ink2); }

@media (max-width: 900px) {
  .pr-add .addons { grid-template-columns: 1fr; }
  .one-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a phone (Dasha, 22 Oct: the site must work on a phone): finger-sized links, labels no smaller than 12 px */
@media (max-width: 860px) {
  .one-acts .lk { display: inline-flex; align-items: center; min-height: 44px; }
  body.one .seg button { min-height: 40px; }
  :is(body.one, .pc-set) .bill-tog .bt-l { padding: 12px 0; }
  :is(body.one, .pc-set) .bill-tog .bt-sw::before { content: ''; position: absolute; inset: -9px -4px; }  /* the switch: a finger-sized target */
  body.one .pr-slide .stops button { min-height: 34px; } body.one .pr-slide .stops button::after { font-size: 12px; }  /* a stop is a tap target too */
  :is(body.one, .pc-set) .bill-tog .off, :is(body.one .one-price, .pc-set) .rec, :is(body.one .one-price, .pc-set) .tag, .one-trust .tm { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tipbox, .one-trust img { transition: none; } }

/* contact, the demo lane (Dasha, 21 Oct: Book a demo picks a time, as on ijewel3d.com/contact) */
@keyframes meet-spin { to { transform: rotate(360deg); } }
@keyframes book-ask { 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }

/* contact, Get help: screenshots and videos with the form (Dasha, 21 Oct); the list lives in the browser only (IJ-436) */
.attach .lbl { display: block; margin-bottom: 0; font: 500 13px/1.3 var(--sans); color: var(--ink); }
/* grey at rest, blue on hover or a file over it (Dasha, 22 Oct: the blue box drew the eye away from the form) */
.attach .drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed rgba(25, 24, 38, .18); background: rgba(25, 24, 38, .025); cursor: pointer;
  transition: background .25s cubic-bezier(.22, 1, .36, 1), border-color .25s cubic-bezier(.22, 1, .36, 1); }
.attach .drop:hover, .attach .drop:focus-within { background: rgba(110, 114, 242, .07); border-color: #6E72F2; }
.attach .drop:focus-visible { outline: 2px solid #6E72F2; outline-offset: 2px; }
.attach .drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attach .drop .ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(25, 24, 38, .05); color: var(--ink2);
  transition: background .25s cubic-bezier(.22, 1, .36, 1), color .25s cubic-bezier(.22, 1, .36, 1); }
.attach .drop:hover .ic, .attach .drop:focus-within .ic { background: rgba(110, 114, 242, .12); color: #6E72F2; }
.attach .drop .tx { min-width: 0; }
.attach .drop b { display: block; font: 500 13.5px/1.3 var(--sans); color: var(--ink); }
.attach .drop b .lk { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color .25s; }
.attach .drop:hover b .lk, .attach .drop:focus-within b .lk { color: #5053D0; }
.attach .drop small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--sans); color: var(--ink2); }
.attach .files { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.attach .files:empty { display: none; }
.attach .files li { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 10px; background: #fff; border: 1px solid rgba(25, 24, 38, .07); font: 400 13px/1.3 var(--sans); color: var(--ink); }
.attach .files .ic { flex: none; width: 22px; height: 22px; border-radius: 6px; background: rgba(110, 114, 242, .12) no-repeat center / 14px; }
.attach .files .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach .files .sz { flex: none; font-size: 12px; color: var(--ink2); }
.attach .files .rm { -webkit-appearance: none; appearance: none; flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink2); cursor: pointer; transition: background .2s, color .2s; }
.attach .files .rm:hover { background: rgba(25, 24, 38, .06); color: var(--ink); }
.attach .files .rm:focus-visible { outline: 2px solid #6E72F2; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .attach .drop, .attach .drop .ic, .attach .drop b .lk, .attach .files .rm { transition: none; } }