/* Refer: the same cream sheet as the home hero, the offer on the left and the link card on the right. */
.rf { --rf-ink: #1C1B19; --rf-mute: #6C675F; --rf-soft: #8C867B; --rf-line: rgba(28, 27, 25, 0.1);
  position: relative; isolation: isolate; overflow: clip; background: #F4EEE3; color: var(--rf-ink); border-bottom: 1px solid rgba(28, 27, 25, 0.07); }
.rf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(50% 50% at 100% 0%, rgba(255, 236, 210, 0.95), rgba(255, 236, 210, 0) 70%),
  radial-gradient(36% 46% at 78% 40%, rgba(25, 70, 186, 0.08), rgba(25, 70, 186, 0) 72%),
  linear-gradient(180deg, #F7F2E9, #F2ECE0); }
.rf-bg::after { content: ""; position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: multiply; background-image: var(--paper-grain); background-size: 180px 180px; }
.rf-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); align-items: start; gap: clamp(40px, 5.5vw, 76px); padding-block: clamp(128px, 15vh, 156px) clamp(64px, 8vw, 104px); }
.rf-main { min-width: 0; max-width: 600px; }
.rf-from { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 9px 14px 9px 12px; border-radius: 999px; background: #FFFDF9; box-shadow: inset 0 0 0 1px var(--rf-line); font: 500 14px/1.35 var(--font-ui); color: var(--rf-ink); }
.rf-from .icon { flex: none; color: var(--encore-izmir-blue); }
.rf-h { font: 500 clamp(42px, 4.6vw, 60px)/0.99 var(--font-display); letter-spacing: -0.035em; color: var(--rf-ink); text-wrap: balance; }
.rf-h2 { display: block; color: var(--rf-soft); }
.rf-lead { margin-top: 20px; max-width: 46ch; font: 400 clamp(16.5px, 1.35vw, 18px)/1.5 var(--font-ui); letter-spacing: -0.01em; color: var(--rf-mute); text-wrap: pretty; }
.rf-k { margin-top: 34px; font: 600 13px/1 var(--font-ui); letter-spacing: 0.02em; color: var(--rf-mute); }
.rf-steps { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rf-line); }
.rf-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rf-line); }
.rf-step-n { font: 500 13px/1.6 var(--font-ui); color: var(--rf-mute); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.rf-step-h { font: 500 21px/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--rf-ink); }
.rf-step-p { margin-top: 5px; font: 400 15px/1.5 var(--font-ui); color: var(--rf-mute); }
.rf-gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.rf-get { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px 16px 18px; border-radius: 16px; background: rgba(255, 253, 249, 0.7); box-shadow: inset 0 0 0 1px var(--rf-line); }
.rf-get-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--rf-line); color: var(--rf-ink); }
.rf-get-k { font: 600 14px/1.3 var(--font-ui); color: var(--rf-ink); }
.rf-get-p { margin-top: 4px; font: 400 14px/1.45 var(--font-ui); color: var(--rf-mute); }
.rf-fine { margin-top: 20px; max-width: 60ch; font: 400 13.5px/1.5 var(--font-ui); color: var(--rf-mute); }
.rf-side { min-width: 0; position: sticky; top: 24px; }

/* The card */
.rf-card { padding: 24px 24px 22px; border-radius: 20px; background: #fff; color: var(--rf-ink);
  box-shadow: 0 0 0 1px rgba(28, 27, 25, 0.05), 0 1px 2px rgba(28, 27, 25, 0.05), 0 8px 16px -8px rgba(28, 27, 25, 0.12), 0 32px 64px -24px rgba(28, 27, 25, 0.22); }
.rf-card-k { font: 500 24px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--rf-ink); }
.rf-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.rf-field { min-width: 0; }
.rf-input { box-sizing: border-box; max-width: 100%; }
.rf-field .gate-label { display: flex; align-items: baseline; gap: 6px; }
.rf-opt { font: 400 12.5px/1 var(--font-ui); color: var(--rf-mute); }
.rf-input { width: 100%; }
.rf-help { margin-top: 7px; font: 400 13px/1.45 var(--font-ui); color: var(--rf-mute); }
.rf-help.is-bad { color: var(--encore-buffalo-brown); font-weight: 500; }
.rf-link-box { display: flex; align-items: center; height: 48px; padding: 0 16px; border-radius: 14px; background: var(--encore-white); box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.22); transition: box-shadow var(--duration-base) var(--ease-standard); }
.rf-link-box:hover { box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.5); }
.rf-link-box:focus-within { box-shadow: inset 0 0 0 2px var(--encore-izmir-blue); }
.rf-link-pre { flex: none; font: 400 16px/1 var(--font-ui); color: var(--rf-mute); letter-spacing: -0.01em; }
.rf-link-input { flex: 1; min-width: 0; height: 100%; padding: 0 0 0 1px; border: 0; background: none; outline: none; font: 500 16px/1 var(--font-ui); letter-spacing: -0.01em; color: var(--rf-ink); }
.rf-card .gate { margin-top: 22px; padding: 20px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--rf-line); }
.rf-card .gate-badge { width: 38px; height: 38px; border-radius: 10px; }
.rf-card .gate-title { font-size: 21px; }
.rf-card .gate-intro { font-size: 14.5px; }
@media (min-width: 560px) { .rf-card .gate-row .gate-input { flex: 1 1 200px; } .rf-card .gate-row { flex-wrap: wrap; } }
.rf-name .gate-row { flex-direction: row; align-items: center; }
.rf-name .gate-row .gate-input { flex: 1 1 auto; min-width: 0; }
.rf-name .gate-row .pill { flex: none; }
.rf-url .lit, .rf-mail .lit { font: inherit; letter-spacing: inherit; padding: 0; background: none; }
.rf-back { margin-top: 16px; font: 400 13.5px/1.45 var(--font-ui); color: var(--rf-mute); }

/* The owner's card */
.rf-linkrow { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 6px 6px 16px; border-radius: 999px; background: #F7F2E9; box-shadow: inset 0 0 0 1px var(--rf-line); }
.rf-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.2 var(--font-ui); letter-spacing: -0.01em; color: var(--rf-ink); user-select: all; }
.rf-copy { flex: none; gap: 6px; }
.rf-copy-ic { display: inline-flex; }
.rf-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 20px; border-radius: 14px; overflow: hidden; background: var(--rf-line); box-shadow: inset 0 0 0 1px var(--rf-line); }
.rf-tile { padding: 13px 14px 14px; background: #fff; }
.rf-tile-k { font: 500 12.5px/1.2 var(--font-ui); color: var(--rf-mute); }
.rf-tile-v { margin-top: 8px; font: 500 30px/1 var(--font-display); letter-spacing: -0.03em; color: var(--rf-ink); font-variant-numeric: tabular-nums; }
.rf-tile-s { margin-top: 5px; font: 400 12.5px/1.3 var(--font-ui); color: var(--rf-mute); }
.rf-prog { display: flex; gap: 4px; margin-top: 16px; }
.rf-prog i { flex: 1; height: 4px; border-radius: 2px; background: #EFEAE0; }
.rf-prog i.is-on { background: var(--encore-izmir-blue); }
.rf-goal { margin-top: 10px; font: 400 14px/1.45 var(--font-ui); color: var(--rf-ink); }
.rf-sub { margin-top: 24px; font: 600 14px/1.3 var(--font-ui); color: var(--rf-ink); }
.rf-sites { margin: 8px 0 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; border-top: 1px solid var(--rf-line); }
.rf-site { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid rgba(28, 27, 25, 0.06); color: inherit; text-decoration: none; }
a.rf-site:hover { background: #FBF8F2; text-decoration: none; color: inherit; }
.rf-site-n { display: flex; flex-direction: column; min-width: 0; }
.rf-site-n b { font: 600 14.5px/1.3 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-site-n span { font: 400 12.5px/1.3 var(--font-ui); color: var(--rf-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-site-d { font: 400 12.5px/1 var(--font-ui); color: var(--rf-mute); white-space: nowrap; }
.rf-site-s { text-align: right; font: 500 20px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rf-none { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: #F7F2E9; font: 400 14px/1.5 var(--font-ui); color: var(--rf-mute); }
.rf-name { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rf-line); }
.rf-name .gate-row { margin-top: 8px; }
.rf-mail { margin-top: 16px; font: 400 13.5px/1.5 var(--font-ui); color: var(--rf-mute); overflow-wrap: anywhere; }
.rf-out { font-size: 13.5px; }

@media (max-width: 1019.98px) {
  .rf-in { grid-template-columns: minmax(0, 1fr); padding-top: 158px; }
  .rf-side { position: static; max-width: 560px; }
}
@media (max-width: 719.98px) {
  .rf-in { gap: 28px; padding-block: 112px 48px; }
  .rf-h { font-size: 35px; line-height: 1.02; }
  .rf-h2 { display: inline; }
  .rf-lead { margin-top: 12px; font-size: 15.5px; }
  .rf-gets { grid-template-columns: minmax(0, 1fr); }
  .rf-card { padding: 20px 18px 18px; }
  .rf-site { grid-template-columns: minmax(0, 1fr) 44px; }
  .rf-site-d { display: none; }
  .rf-tile-v { font-size: 26px; }
}
.rf-site .lit { font: inherit; letter-spacing: inherit; }