/* Section 2 -- Features: the heading, one marquee row of portrait feature cards, and the card's detail dialog
   (a carousel of real screenshots, or a before / after comparison). Loaded with the page; the dialog's
   images are fetched only when a dialog opens (features.js). */
/* ------------------------------------------------------------- section */
.rfeat{
  all:initial;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;
  min-height:100vh;min-height:100svh;
  padding:clamp(48px,8vh,80px) 0 clamp(24px,4vh,44px);
  box-sizing:border-box;
  font-family:Poppins,system-ui,sans-serif;
  color:#2a1215;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;   /* `all` resets it: no mobile text inflation */
  overflow-x:clip;
  --cw:248px;--cgap:28px;   /* features.js sets them from the ring */
}
.rfeat *,.rfeat *::before,.rfeat *::after{box-sizing:border-box}
.rfeat-head{flex:none;text-align:center;width:100%;padding:0 clamp(14px,3vw,44px)}
.rfeat-pill{
  display:inline-block;
  font-family:Poppins,system-ui,sans-serif;
  font-size:12px;font-weight:500;line-height:1;
  letter-spacing:2px;text-transform:uppercase;
  color:#B08A2E;
  border:1px solid #E6D3A8;border-radius:999px;
  padding:8px 16px 7px 18px;
}
.rfeat-title{
  display:block;
  font-family:Poppins,system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(28px,calc(16px + 2.8vw),56px);
  line-height:1.15;letter-spacing:-.01em;
  color:#2a1215;
  margin:clamp(12px,1.8vh,18px) 0 0;
}
.rfeat-title .rfeat-w{white-space:nowrap}
/* phones: "Everything you need," / "in one app" (the break before "in", the phrase held by no-break spaces) */
@media (max-width:699px){ .rfeat-title{text-wrap:balance} }
.rfeat-title .rfeat-ink{color:#2a1215}
.rfeat-title .rfeat-gold{color:#B08A2E}
.rfeat-title .rfeat-red{color:#8B0000}
.rfeat-title .rfeat-ch{opacity:0;filter:blur(2.5px);transition:opacity .3s ease,filter .3s ease}
.rfeat-title .rfeat-ch.on{opacity:1;filter:none}
.rfeat-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- the row */
/* --cw is the rings' front-phone width (features.js reads it from the ring), --cgap the gap between cards;
   --ct-* / --cl-* the title's and line's size and line count, one for all cards */
.rfeat-rows{flex:none;width:100%;margin-top:clamp(20px,3.6vh,40px)}
.rfeat-rowwrap{will-change:transform,opacity}
.rfeat-row{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:8px 0 calc(var(--cw) * .17);   /* room for the hover lift, the focus ring and the cards' shadow */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  touch-action:pan-y;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.rfeat-row.is-dragging{cursor:grabbing}
.rfeat-track{display:flex;width:max-content;will-change:transform}
.rfeat-set{display:flex;gap:var(--cgap);padding:0 var(--cgap) 0 0;margin:0;list-style:none}
.rfeat-set > li{display:block;margin:0;padding:0}
@media (max-width:699px){
  /* a narrow fade: the cards' neighbours peek by about 50 px (features.js) */
  .rfeat-row{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);
                     mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
}

/* ------------------------------------------------------------- cards: portrait panels, the ring phone's size */
.rfeat-card{
  all:unset;
  box-sizing:border-box;
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:var(--cw);height:calc(var(--cw) * 1.944);
  padding:calc(var(--cw) * .1) calc(var(--cw) * .08) 0;
  background:#FCF9F3;
  border:1px solid #EFE6D4;border-radius:calc(var(--cw) * .118);
  overflow:hidden;isolation:isolate;
  box-shadow:
    0 calc(var(--cw) * .055) calc(var(--cw) * .13) rgba(24,16,18,.12),
    0 calc(var(--cw) * .012) calc(var(--cw) * .03) rgba(24,16,18,.08);
  font-family:Poppins,system-ui,sans-serif;
  text-align:center;
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.rfeat-card:hover{transform:translateY(-3px);border-color:#E6D3A8;
  box-shadow:0 calc(var(--cw) * .07) calc(var(--cw) * .15) rgba(24,16,18,.16),0 calc(var(--cw) * .015) calc(var(--cw) * .035) rgba(24,16,18,.10)}
.rfeat-card:focus-visible{outline:2px solid #B08A2E;outline-offset:3px}
/* phones: the card is 66 % of the width (features.js); its height about 52 % of the small viewport, never
   taller than the phone's proportion. svh: the toolbars showing or hiding never resize it */
@media (max-width:699px){
  .rfeat-card{height:min(calc(var(--cw) * 1.944),52vh);height:min(calc(var(--cw) * 1.944),52svh)}
}
.rfeat-row.is-dragging .rfeat-card{cursor:grabbing}
.rfeat-ico{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:11px;
  background:#F5ECDA;border:1px solid #EFE2C6;
  font-size:20px;line-height:1;
  font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;
}
.rfeat-card .rfeat-ico{width:calc(var(--cw) * .226);height:calc(var(--cw) * .226);border-radius:calc(var(--cw) * .064);font-size:calc(var(--cw) * .112)}
/* the same heights in every card, so the three sit at the same offsets */
.rfeat-ct{
  flex:none;display:block;width:100%;
  margin:calc(var(--cw) * .072) 0 0;
  font-weight:600;font-size:var(--ct-fs,20px);line-height:1.25;color:#B08A2E;
  height:calc(var(--ct-fs,20px) * 1.25 * var(--ct-lines,1));overflow:hidden;
}
.rfeat-cl{
  flex:none;width:100%;
  margin:calc(var(--cw) * .03) 0 0;
  font-weight:400;font-size:var(--cl-fs,13.4px);line-height:1.5;color:#8C6A1F;
  height:calc(var(--cl-fs,13.4px) * 1.5 * var(--cl-lines,3));
  display:-webkit-box;-webkit-line-clamp:var(--cl-lines,3);-webkit-box-orient:vertical;overflow:hidden;
}

/* the lower half (or, on a small card, what the text leaves): a screenshot peeking from the bottom, or an illustration */
.rfeat-cv{position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  top:max(calc(var(--cw) * .97),
          calc(var(--cw) * .458 + var(--ct-fs,20px) * 1.25 * var(--ct-lines,1) + var(--cl-fs,13.4px) * 1.5 * var(--cl-lines,3)))}
.rfeat-cv .rfeat-phone{
  --fw:calc(var(--cw) * .76);
  display:block;position:absolute;left:50%;top:calc(var(--cw) * .07);
  margin-left:calc(var(--fw) / -2);
}
.rfeat-cv .rfeat-screen{border-bottom-left-radius:0;border-bottom-right-radius:0}
.rfeat-peek{display:block;width:100%;height:auto;aspect-ratio:450 / 540;background:#f3efe8;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.rfeat-art{
  position:absolute;left:50%;top:47%;
  height:min(calc(var(--cw) * .8),92%);aspect-ratio:1;
  transform:translate(-50%,-50%);
}
.rfeat-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  fill:none;stroke:#C9A55A;stroke-width:1;vector-effect:non-scaling-stroke}
.rfeat-art svg *{vector-effect:non-scaling-stroke}
.rfeat-art .h{stroke:#E6D3A8}
.rfeat-art .dash{stroke:#D9BE82;stroke-dasharray:1 5;stroke-linecap:round}
.rfeat-art .d{fill:#FCF9F3;stroke:#E6D3A8}
.rfeat-art .f{fill:#D9BE82;stroke:none}
.rfeat-art text{fill:#B08A2E;stroke:none;font-family:Poppins,'Noto Sans Devanagari','Noto Sans SC',system-ui,sans-serif;font-size:13px;font-weight:500;text-anchor:middle}
.rfeat-medal{
  position:absolute;left:50%;top:50%;
  width:50%;height:50%;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#FFFDF8 0,#F5ECDA 72%);
  box-shadow:0 0 0 1px #EFE2C6,0 8px 20px -10px rgba(122,86,20,.35);
  font-size:calc(var(--cw) * .17);line-height:1;
  font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;
}

/* ------------------------------------------------------------- reduced motion: a static row that scrolls */
.rfeat.is-static .rfeat-row{overflow-x:auto;overflow-y:hidden;cursor:auto;scrollbar-width:thin;scrollbar-color:#E6D3A8 transparent;
  scroll-padding:0 9%;padding-left:9%;padding-right:9%;touch-action:auto}
.rfeat.is-static .rfeat-row{-webkit-mask-image:none;mask-image:none}
.rfeat.is-static .rfeat-card{transition:none}

/* ------------------------------------------------------------- the dialog */
.rfeat-dlg{
  all:unset;
  box-sizing:border-box;
  position:fixed;inset:0;
  width:100%;height:100%;max-width:none;max-height:none;
  display:none;align-items:center;justify-content:center;
  padding:24px;
  background:transparent;
  font-family:Poppins,system-ui,sans-serif;
  color:#2a1215;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:contain;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  z-index:60;
}
.rfeat-dlg[open]{display:flex}
.rfeat-dlg::backdrop{background:rgba(42,18,21,.48);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.rfeat-dlg *,.rfeat-dlg *::before,.rfeat-dlg *::after{box-sizing:border-box}
.rfeat-box{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:36px;align-items:center;
  width:min(860px,100%);max-height:100%;
  overflow:auto;overscroll-behavior:contain;
  background:#FFFDF9;
  border:1px solid #EFE6D4;border-radius:24px;
  padding:34px 40px 30px;
  box-shadow:0 30px 80px -30px rgba(42,18,21,.5);
}
.rfeat-x{
  all:unset;box-sizing:border-box;
  position:absolute;top:12px;right:12px;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  color:#8C6A1F;font-size:26px;line-height:1;cursor:pointer;
  transition:background .2s ease;
}
.rfeat-x:hover{background:#F5ECDA}
.rfeat-x:focus-visible{outline:2px solid #B08A2E;outline-offset:1px}
.rfeat-copy{min-width:0}
.rfeat-dhead{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.rfeat-dhead .rfeat-ico{width:46px;height:46px;font-size:24px;border-radius:13px}
.rfeat-dtitle{font-weight:700;font-size:26px;line-height:1.2;color:#B08A2E;margin:0;letter-spacing:-.005em}
.rfeat-ddesc p{margin:0 0 10px;font-size:15px;line-height:1.6;color:#6b5120}
.rfeat-cap{margin:16px 0 0;min-height:1.5em;font-size:14px;font-weight:500;line-height:1.45;color:#8B0000}
.rfeat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.rfeat-chip{
  all:unset;box-sizing:border-box;cursor:pointer;
  font-size:12.5px;font-weight:500;line-height:1;color:#8C6A1F;
  padding:8px 13px;border-radius:999px;border:1px solid #E6D3A8;background:#FFFDF9;
  transition:background .2s ease,color .2s ease;
}
.rfeat-chip[aria-pressed="true"]{background:#B08A2E;border-color:#B08A2E;color:#fff}
.rfeat-chip:focus-visible{outline:2px solid #B08A2E;outline-offset:2px}

/* the visual: one phone (as the ring's: thin bezel, rim, side keys, the clean status bar) */
.rfeat-vis{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;--fw:270px}
.rfeat-phone{
  position:relative;
  width:var(--fw);
  background:#101013;
  border-radius:calc(var(--fw) * .118);
  padding:calc(var(--fw) * .028);
  box-shadow:
    0 0 0 calc(var(--fw) * .0035) #3a3a41,
    0 calc(var(--fw) * .055) calc(var(--fw) * .13) rgba(24,16,18,.20),
    0 calc(var(--fw) * .012) calc(var(--fw) * .03) rgba(24,16,18,.12);
}
.rfeat-phone::before,.rfeat-phone::after{
  content:"";position:absolute;left:100%;
  width:calc(var(--fw) * .0115);
  background:linear-gradient(180deg,#2a2a30,#17171b);
  border-radius:0 2px 2px 0;
}
.rfeat-phone::before{top:21%;height:6.2%}
.rfeat-phone::after{top:30.5%;height:11%}
.rfeat-screen{
  position:relative;
  width:100%;
  border-radius:calc(var(--fw) * .092);
  overflow:hidden;
  background:#000;
  display:flex;flex-direction:column;
  isolation:isolate;
}
.rfeat-sb{
  flex:none;position:relative;
  height:calc(var(--fw) * .0891);
  background:#8b0000;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--fw) * .038);
  font-size:calc(var(--fw) * .0355);font-weight:500;letter-spacing:.01em;line-height:1;
  transition:background-color .3s ease;
}
.rfeat-sb.is-light{color:#1c1416}
.rfeat-sb span{display:flex;align-items:center;gap:calc(var(--fw) * .018)}
.rfeat-sb svg{display:block;height:calc(var(--fw) * .0295);width:auto;fill:currentColor}
.rfeat-sb i{position:absolute;left:50%;top:50%;width:calc(var(--fw) * .0335);height:calc(var(--fw) * .0335);
  transform:translate(-50%,-50%);background:#000;border-radius:50%;box-shadow:0 0 0 .5px rgba(255,255,255,.14)}
/* the app's area: the cropped screenshot's 1080 x 2071 */
.rfeat-view{position:relative;width:100%;aspect-ratio:1080 / 2071;overflow:hidden;background:#f3efe8}
.rfeat-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}

/* carousel */
.rfeat-slides{position:absolute;inset:0;display:flex;transition:transform .45s cubic-bezier(.2,.7,.2,1);touch-action:pan-y}
.rfeat-slides.is-dragging{transition:none}
.rfeat-slide{position:relative;flex:0 0 100%;height:100%}
.rfeat-nav{display:flex;align-items:center;gap:14px}
.rfeat-arrow{
  all:unset;box-sizing:border-box;cursor:pointer;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid #E6D3A8;color:#B08A2E;background:#FFFDF9;
  transition:background .2s ease,opacity .2s ease;
}
.rfeat-arrow:hover{background:#F5ECDA}
.rfeat-arrow:focus-visible{outline:2px solid #B08A2E;outline-offset:2px}
.rfeat-arrow[disabled]{opacity:.35;cursor:default}
.rfeat-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rfeat-dots{display:flex;gap:4px}
.rfeat-dot{all:unset;box-sizing:border-box;cursor:pointer;width:22px;height:22px;display:grid;place-items:center}
.rfeat-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#E6D3A8;transition:background .2s ease,transform .2s ease}
.rfeat-dot[aria-current="true"]::before{background:#B08A2E;transform:scale(1.25)}
.rfeat-dot:focus-visible{outline:2px solid #B08A2E;outline-offset:-2px;border-radius:50%}

/* before / after */
.rfeat-cmp{position:absolute;inset:0;touch-action:pan-y;cursor:ew-resize;--p:50%}
.rfeat-cmp .rfeat-after{clip-path:inset(0 0 0 var(--p))}
.rfeat-cmp .rfeat-before,.rfeat-cmp .rfeat-after{position:absolute;inset:0}
.rfeat-tag{
  position:absolute;bottom:10px;z-index:2;
  font-size:10.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;line-height:1;
  padding:6px 9px 5px;border-radius:999px;
  background:rgba(28,20,22,.72);color:#fff;
  pointer-events:none;transition:opacity .2s ease;
}
.rfeat-tag.b{left:10px}
.rfeat-tag.a{right:10px;background:rgba(139,0,0,.82)}
.rfeat-bar{position:absolute;top:0;bottom:0;left:var(--p);width:0;z-index:3}
.rfeat-bar::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(28,20,22,.18),0 0 10px rgba(0,0,0,.25)}
.rfeat-knob{
  position:absolute;left:0;top:50%;
  width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:#fff;color:#8B0000;
  display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  cursor:ew-resize;outline:none;touch-action:none;
}
.rfeat-knob svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rfeat-knob:focus-visible{box-shadow:0 0 0 3px #B08A2E,0 2px 10px rgba(0,0,0,.28)}
/* Premium: the paywall's own words, as a card */
.rfeat-plan{
  width:var(--fw);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:28px 22px 22px;border-radius:22px;
  background:linear-gradient(160deg,#8B0000 0%,#5e0a12 100%);color:#fff;
  box-shadow:0 18px 40px -18px rgba(90,10,18,.6);
}
.rfeat-plan-ico{font-size:34px;line-height:1;margin-bottom:10px;font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif}
.rfeat-plan b{font-size:20px;font-weight:700;line-height:1.2}
.rfeat-plan i{font-style:normal;font-size:13px;color:#F3DFA9;margin-top:4px}
.rfeat-plan ul{list-style:none;margin:18px 0 18px;padding:0;align-self:stretch;text-align:left}
.rfeat-plan li{position:relative;font-size:13.5px;line-height:1.35;padding:6px 0 6px 26px;border-top:1px solid rgba(255,255,255,.12)}
.rfeat-plan li:first-child{border-top:0}
.rfeat-plan li::before{content:"";position:absolute;left:4px;top:10px;width:10px;height:5px;border:solid #E6C36B;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.rfeat-plan-cta{display:block;align-self:stretch;background:#fff;color:#8B0000;font-weight:600;font-size:14px;padding:11px 10px;border-radius:999px}
.rfeat-plan-price{font-size:13px;margin-top:10px;color:#F3DFA9}
.rfeat-plan-fine{font-size:11.5px;margin-top:4px;color:rgba(255,255,255,.7)}
.rfeat-hint{margin:0;font-size:12px;line-height:1.4;color:#a08451;text-align:center}
.rfeat-src{margin:12px 0 0;font-size:12px;line-height:1.45;color:#a08451}

@media (max-width:760px){
  .rfeat-dlg{padding:10px;align-items:flex-end}
  /* one column: the title, the phone, its chips and caption, then the text */
  .rfeat-box{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:22px 18px 20px;border-radius:22px 22px 18px 18px}
  .rfeat-copy{display:contents}
  .rfeat-dhead{order:1;padding-right:40px;margin-bottom:16px}
  .rfeat-vis{--fw:min(52vw,210px);order:2}
  .rfeat-chips{order:3;justify-content:center;margin-top:14px}
  .rfeat-cap{order:4;text-align:center;margin-top:12px}
  .rfeat-ddesc{order:5;margin-top:14px}
  .rfeat-src{order:6}
  .rfeat-plan{width:min(100%,300px);align-self:center;padding:22px 20px 18px}
  .rfeat-dhead .rfeat-ico{width:40px;height:40px;font-size:21px}
  .rfeat-dtitle{font-size:21px}
  .rfeat-ddesc p{font-size:14px;line-height:1.55}
  .rfeat-cap{margin-top:10px}
}
@media (max-width:760px) and (max-height:700px){ .rfeat-vis{--fw:min(50vw,200px)} }
@media (min-width:761px) and (max-height:820px){ .rfeat-vis{--fw:min(250px,calc((100vh - 170px) / 1.98))} }
@supports (height:100svh){
  @media (min-width:761px) and (max-height:820px){ .rfeat-vis{--fw:min(250px,calc((100svh - 170px) / 1.98))} }
}

html.rfeat-lock{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .rfeat-title .rfeat-ch{transition:none}
  .rfeat-slides{transition:none}
  .rfeat-card,.rfeat-card:hover{transition:none;transform:none}
}