/* 《2027 GEO 行銷戰略前瞻白皮書》landing page — 所有樣式限定在 .rk27 內，僅此頁載入；顏色取自 Rankking 品牌色票 */

.rk27 {
	--t: #00b1c8;
	--t-d: #008da0;
	--t-l: #3bd1e5;
	--o: #faab42;
	--o-l: #ffd49a;
	--s: #40525e;
	--g: #7f8081;
	--gr: #83b362;
	--r: #d96560;
	--zh: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
	--en: "Poppins", "Montserrat", "Noto Sans TC", sans-serif;
	position: relative;
	overflow-x: clip;
	font-family: var(--zh);
	color: var(--s);
	line-height: 1.75;
	letter-spacing: .03em;
}
.rk27 *, .rk27 *::before, .rk27 *::after { box-sizing: border-box; }
/* 重置規則用 :where() 壓低權重，讓後面各區塊的間距設定能正常生效 */
.rk27 :where(img) { display: block; max-width: 100%; height: auto; }
.rk27 :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.rk27 :where(ul, ol) { list-style: none; padding: 0; }
.rk27 :where(a) { text-decoration: none; }
.rk27 :where(svg) { display: block; }
.rk27-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.rk27-center { margin-top: 48px; text-align: center; }
/* 畫面上隱藏、螢幕閱讀器與 GTM 的 Click Text 仍讀得到（讓既有「點擊 - 白皮書加LINE」觸發條件命中） */
.rk27-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- buttons ---------- */
.rk27-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 12px 34px;
	border: 0;
	border-radius: 100px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.rk27-btn svg { width: 20px; height: 20px; flex: none; }
.rk27-btn:focus-visible, .rk27 a:focus-visible, .rk27 button:focus-visible { outline: 3px solid var(--t-l); outline-offset: 3px; }
.rk27-btn--orange { background: var(--o); color: #fff; box-shadow: 0 5px 0 0 var(--o-l); }
.rk27-btn--orange:hover { color: #fff; transform: translateY(3px); box-shadow: 0 2px 0 0 var(--o-l); }
.rk27-btn--teal { background: var(--t); color: #fff; box-shadow: 0 5px 0 0 var(--t-d); }
.rk27-btn--teal:hover { color: #fff; transform: translateY(3px); box-shadow: 0 2px 0 0 var(--t-d); }
.rk27-btn--ghost { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 5px 0 0 rgba(255, 255, 255, .5); }
.rk27-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .26); transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 0 0 rgba(255, 255, 255, .5); }
.rk27-btn--line { width: 100%; background: var(--gr); color: #fff; box-shadow: 0 5px 0 0 rgba(0, 0, 0, .22); }
.rk27-btn--line:hover { color: #fff; transform: translateY(3px); box-shadow: 0 2px 0 0 rgba(0, 0, 0, .22); }

.rk27-check {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 50%;
	background: #fff;
	color: var(--t);
}
.rk27-check svg { width: 14px; height: 14px; stroke-width: 3; }

/* ---------- section headings ---------- */
.rk27-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.rk27-kicker {
	display: inline-block;
	margin-bottom: 12px;
	font-family: var(--en);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--t);
}
.rk27-h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.5; letter-spacing: .05em; color: var(--s); }
.rk27-mark { background: linear-gradient(transparent 62%, rgba(250, 171, 66, .38) 62%); }
.rk27-sub { margin-top: 14px; font-size: 16px; line-height: 1.85; color: var(--g); }

.rk27-bracket {
	position: relative;
	display: inline-block;
	padding: 16px 40px;
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .06em;
	color: #fff;
}
.rk27-bracket::before, .rk27-bracket::after {
	content: "";
	position: absolute;
	width: 27px;
	height: 27px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.rk27-bracket::before { left: 0; top: 0; background-image: url(/wp-content/themes/wp-ranking-2025/images/Vector_37.svg); }
.rk27-bracket::after { right: 0; bottom: 0; background-image: url(/wp-content/themes/wp-ranking-2025/images/Vector_38.svg); }
.rk27-lead { max-width: 680px; margin: 10px auto 0; font-size: 16.5px; color: rgba(255, 255, 255, .95); }

.rk27-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rk27-tags li {
	padding: 6px 12px;
	border-radius: 100px;
	background: rgba(64, 82, 94, .06);
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--s);
}

/* ---------- hero ---------- */
.rk27-hero { padding: 150px 0 136px; color: #fff; }
.rk27-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 64px; align-items: center; }
.rk27-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 100px;
	background: rgba(255, 255, 255, .16);
	font-family: var(--en);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .28em;
}
.rk27-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--o); }
.rk27-hero__title { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; text-shadow: 0 2px 4px rgba(25, 32, 40, .35), 0 4px 22px rgba(25, 32, 40, .3); }
.rk27-hero__year { font-family: var(--en); font-size: clamp(50px, 6.2vw, 84px); font-weight: 800; line-height: 1; letter-spacing: .01em; }
.rk27-hero__name { font-size: clamp(28px, 3.3vw, 44px); font-weight: 700; line-height: 1.3; letter-spacing: .07em; }
.rk27-hero__tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 18px; font-size: 17px; font-weight: 500; }
.rk27-hero__tagline i { font-style: normal; font-weight: 700; color: var(--o); }
.rk27-hero__points { display: grid; gap: 12px; margin-top: 26px; }
.rk27-hero__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.6; }
.rk27-hero__ctas { display: grid; grid-template-columns: repeat(2, 1fr); width: max-content; max-width: 100%; gap: 16px; margin-top: 34px; }
/* 首屏文字加灰黑色陰影，避免被天空背景吃掉 */
.rk27-eyebrow, .rk27-hero__tagline, .rk27-hero__points li, .rk27-hero .rk27-btn--ghost { text-shadow: 0 1px 3px rgba(25, 32, 40, .5), 0 2px 10px rgba(25, 32, 40, .25); }

.rk27-hero__visual { position: relative; perspective: 1600px; }
.rk27-cover {
	position: relative;
	padding: 10px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 34px 64px -22px rgba(0, 60, 90, .5), 0 0 0 1px rgba(255, 255, 255, .6);
	transform: rotateY(-10deg) rotateX(4deg) rotateZ(1deg);
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.rk27-cover::before, .rk27-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 18px;
	background: rgba(255, 255, 255, .55);
	transform: translate(14px, 14px);
}
.rk27-cover::after { background: rgba(255, 255, 255, .28); transform: translate(28px, 28px); }
.rk27-hero__visual:hover .rk27-cover { transform: none; }
.rk27-cover img { width: 100%; border-radius: 10px; }
.rk27-chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px 9px 9px;
	border-radius: 100px;
	background: #fff;
	box-shadow: 0 14px 30px -12px rgba(0, 60, 90, .45);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--s);
	animation: rk27-float 5s ease-in-out infinite;
}
.rk27-chip b { font-family: var(--en); color: var(--t); }
.rk27-chip__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 177, 200, .12); color: var(--t); }
.rk27-chip__ic svg { width: 17px; height: 17px; }
.rk27-chip--a { top: -24px; left: -22px; }
.rk27-chip--b { right: 6%; bottom: -30px; animation-delay: -2.5s; }
.rk27-chip--b .rk27-chip__ic { background: rgba(250, 171, 66, .18); color: var(--o); }
.rk27-chip--b b { color: var(--o); }
.rk27-badge {
	position: absolute;
	top: -40px;
	right: -18px;
	display: grid;
	place-content: center;
	width: 106px;
	height: 106px;
	border-radius: 50%;
	background: var(--o);
	box-shadow: 0 6px 0 0 var(--o-l), 0 18px 32px -12px rgba(160, 90, 0, .5);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	text-align: center;
	color: #fff;
	transform: rotate(12deg);
}
.rk27-badge span { display: block; font-family: var(--en); font-size: 23px; letter-spacing: .08em; }
@keyframes rk27-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- stats ---------- */
.rk27-stats { position: relative; z-index: 2; margin-top: -72px; }
.rk27-stats__panel { padding: 40px 44px 26px; border-radius: 28px; background: #fff; box-shadow: 0 26px 60px -26px rgba(0, 60, 90, .4); }
.rk27-stats__head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: 18px; font-weight: 700; }
.rk27-stats__head::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(var(--t), var(--o)); }
.rk27-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 52px; }
.rk27-stat { position: relative; padding: 2px 0; container-type: inline-size; }
.rk27-stat + .rk27-stat::before { content: ""; position: absolute; top: 0; bottom: 0; left: -26px; width: 1px; background: rgba(64, 82, 94, .12); }
.rk27-stat__val { display: flex; align-items: baseline; gap: 2px; font-family: var(--en); font-size: clamp(40px, 4vw, 54px); font-size: min(clamp(40px, 4vw, 54px), 24cqi); font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--t); }
.rk27-stat__val small { font-size: .5em; font-weight: 600; }
.rk27-stat:nth-child(even) .rk27-stat__val { color: var(--o); }
.rk27-stat__label { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
.rk27-stat__note { margin-top: 4px; font-size: 13.5px; line-height: 1.65; color: var(--g); }
.rk27-stat__sep { margin: 0 6px; font-size: .5em; font-style: normal; font-weight: 400; color: rgba(64, 82, 94, .3); }

/* ---------- pain points ---------- */
.rk27-pain { padding: 100px 0 108px; text-align: center; color: #fff; }
.rk27-pain__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; text-align: left; }
.rk27-pain__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 24px 14px 14px;
	border-radius: 100px;
	background: #fff;
	box-shadow: 0 16px 32px -18px rgba(0, 60, 90, .5);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--s);
}
.rk27-pain__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 177, 200, .12); color: var(--t); }
.rk27-pain__item:nth-child(even) .rk27-pain__ic { background: rgba(250, 171, 66, .18); color: var(--o); }
.rk27-pain__ic svg { width: 22px; height: 22px; }
.rk27-pain__bridge { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 52px; font-size: 19px; font-weight: 700; letter-spacing: .06em; }
.rk27-bounce { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); animation: rk27-bounce 1.8s ease-in-out infinite; }
.rk27-bounce svg { width: 20px; height: 20px; }
@keyframes rk27-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- white sheet & sections ---------- */
.rk27-sheet { overflow: hidden; border-radius: 44px; background: #fff; box-shadow: 0 -10px 50px -30px rgba(0, 60, 90, .4); }
.rk27-sec { padding: 100px 0; }
.rk27-sec--tint { background: linear-gradient(180deg, rgba(0, 177, 200, .07), rgba(0, 177, 200, .03)); }

/* chapters */
.rk27-ch__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rk27-ch {
	--bg: rgba(0, 177, 200, .08);
	--fg: var(--s);
	--c: var(--t);
	--line: rgba(64, 82, 94, .18);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 26px 24px 26px;
	border-radius: 22px;
	background: var(--bg);
	color: var(--fg);
	transition: transform .25s ease, box-shadow .25s ease, color .3s ease;
}
/* 滑鼠移入時淡入深灰底 */
.rk27-ch::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(circle at 100% 0%, rgba(0, 177, 200, .42), transparent 60%), var(--s);
	opacity: 0;
	transition: opacity .3s ease;
}
.rk27-ch--o { --bg: rgba(250, 171, 66, .12); --fg: var(--s); --c: var(--o); --line: rgba(64, 82, 94, .18); }
.rk27-ch--t { --bg: linear-gradient(145deg, var(--t), var(--t-d)); --fg: #fff; --c: #fff; --line: rgba(255, 255, 255, .32); }
.rk27-ch:hover { --fg: #fff; --c: var(--o-l); --line: rgba(255, 255, 255, .32); transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(0, 60, 90, .45); }
.rk27-ch:hover::before { opacity: 1; }
.rk27-ch__no { font-family: var(--en); font-size: 46px; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--c); }
.rk27-ch h3 { min-height: 3.1em; margin: 16px 0 14px; font-size: 18px; font-weight: 700; line-height: 1.55; letter-spacing: .04em; color: var(--fg); }
.rk27-ch__list { display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line); }
.rk27-ch__list li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.65; }
.rk27-ch__list li::before { content: ""; position: absolute; top: .65em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

/* preview carousel */
.rk27-preview { margin-top: 76px; }
.rk27-preview__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.rk27-preview__head h3 { font-size: 22px; font-weight: 700; letter-spacing: .05em; }
.rk27-preview__head p { margin-top: 4px; font-size: 14.5px; color: var(--g); }
.rk27-nav { display: flex; flex: none; gap: 10px; }
.rk27-nav button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid rgba(64, 82, 94, .18);
	border-radius: 50%;
	background: #fff;
	color: var(--s);
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.rk27-nav button svg { width: 20px; height: 20px; }
.rk27-nav button:hover:not(:disabled) { border-color: var(--t); background: var(--t); color: #fff; }
.rk27-nav button:disabled { opacity: .35; cursor: default; }
.rk27-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	padding: 6px 2px 18px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 177, 200, .4) transparent;
	-webkit-overflow-scrolling: touch;
}
.rk27-page {
	flex: 0 0 min(440px, 82%);
	padding: 8px;
	border: 1px solid rgba(64, 82, 94, .08);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 14px 30px -20px rgba(0, 60, 90, .5);
	scroll-snap-align: start;
}
.rk27-page img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.rk27-page figcaption { display: flex; align-items: center; gap: 10px; padding: 12px 8px 6px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.rk27-page figcaption span { flex: none; padding: 2px 8px; border-radius: 6px; background: rgba(0, 177, 200, .1); font-family: var(--en); font-size: 12px; font-weight: 700; color: var(--t-d); }

/* cases */
.rk27-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rk27-case {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 30px 28px;
	border: 1px solid rgba(64, 82, 94, .1);
	border-radius: 24px;
	background: #fff;
	transition: transform .25s ease, box-shadow .25s ease;
}
.rk27-case:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -28px rgba(0, 60, 90, .5); }
.rk27-case__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rk27-pill { padding: 4px 12px; border-radius: 100px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.rk27-pill--t { background: rgba(0, 177, 200, .12); color: var(--t-d); }
.rk27-pill--o { box-shadow: inset 0 0 0 1.5px var(--o); color: var(--s); }
.rk27-case h3 { font-size: 19px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; }
.rk27-case__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin-top: auto; }
.rk27-case__stat { padding: 14px 16px; border-radius: 16px; background: rgba(0, 177, 200, .07); }
.rk27-case__stat b { display: block; font-family: var(--en); font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--t); }
.rk27-case__stat span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; }
.rk27-case__insight { padding-left: 14px; border-left: 3px solid var(--o); font-size: 14px; line-height: 1.75; color: var(--g); }
.rk27-case--feat {
	grid-column: span 2;
	padding: 36px 36px 32px;
	border-color: transparent;
	background: radial-gradient(circle at 100% 0%, rgba(0, 177, 200, .45), transparent 58%), var(--s);
	color: #fff;
}
.rk27-case--feat h3 { font-size: clamp(21px, 2.2vw, 26px); color: #fff; }
.rk27-case--feat .rk27-pill--t { background: rgba(0, 177, 200, .3); color: #fff; }
.rk27-case--feat .rk27-pill--o { color: #fff; }
.rk27-case__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.rk27-case__actions li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.rk27-case__actions .rk27-check { width: 20px; height: 20px; background: rgba(255, 255, 255, .16); color: var(--o-l); }
.rk27-case__actions .rk27-check svg { width: 12px; height: 12px; }
.rk27-case--feat .rk27-case__stat { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); }
.rk27-case--feat .rk27-case__stat b { font-size: 36px; color: var(--o); }
.rk27-case--feat .rk27-case__stat span { color: rgba(255, 255, 255, .85); }
.rk27-case--feat .rk27-case__insight { color: rgba(255, 255, 255, .82); }

/* monitoring */
.rk27-monitor__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.rk27-monitor .rk27-h2, .rk27-monitor .rk27-sub { text-align: left; }
.rk27-monitor__kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rk27-monitor__kpis li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; background: rgba(0, 177, 200, .09); font-size: 14.5px; font-weight: 700; color: var(--t-d); }
.rk27-monitor__kpis li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.rk27-monitor__kpis li:nth-child(even) { background: rgba(250, 171, 66, .14); color: var(--s); }
.rk27-monitor__kpis li:nth-child(even)::before { background: var(--o); }
.rk27-monitor__tool { margin-top: 28px; padding-top: 24px; border-top: 1px dashed rgba(64, 82, 94, .18); }
.rk27-monitor__name { font-size: 17px; font-weight: 700; }
.rk27-monitor__name b { font-family: var(--en); color: var(--t); }
.rk27-monitor__feats { display: grid; gap: 10px; margin: 14px 0 16px; }
.rk27-monitor__feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.6; }
.rk27-monitor__feats .rk27-check { width: 20px; height: 20px; background: rgba(0, 177, 200, .12); }
.rk27-monitor__feats .rk27-check svg { width: 12px; height: 12px; }
.rk27-browser { overflow: hidden; border: 1px solid rgba(64, 82, 94, .1); border-radius: 18px; background: #fff; box-shadow: 0 32px 60px -32px rgba(0, 60, 90, .55); }
.rk27-browser__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(64, 82, 94, .08); background: rgba(64, 82, 94, .05); }
.rk27-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--r); }
.rk27-browser__bar i:nth-child(2) { background: var(--o); }
.rk27-browser__bar i:nth-child(3) { background: var(--gr); }
.rk27-browser__bar span { margin-left: 10px; font-family: var(--en); font-size: 12px; color: var(--g); }
/* 兩張後台截圖前後交疊 */
.rk27-monitor__visual { position: relative; padding-bottom: 18px; }
.rk27-shot { position: relative; }
.rk27-shot--1 { width: 90%; }
.rk27-shot--2 { position: relative; z-index: 2; width: 72%; margin: -9% 0 0 auto; }
.rk27-shot--2 .rk27-browser { box-shadow: 0 36px 64px -28px rgba(0, 60, 90, .6); }
.rk27-shot figcaption {
	position: absolute;
	left: 16px;
	bottom: -14px;
	padding: 5px 14px;
	border-radius: 100px;
	background: #fff;
	box-shadow: 0 8px 20px -10px rgba(0, 60, 90, .5);
	font-size: 13px;
	font-weight: 700;
	color: var(--t-d);
	white-space: nowrap;
}
.rk27-shot--1 figcaption { top: -14px; bottom: auto; z-index: 3; }
.rk27-shot--2 figcaption { left: auto; right: 16px; color: var(--s); }
.rk27-monitor__visual { padding-top: 14px; }

/* ---------- download ---------- */
.rk27-dl { padding: 110px 0 100px; text-align: center; color: #fff; }
.rk27-dl__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 26px; align-items: stretch; margin-top: 46px; text-align: left; }
.rk27-way { position: relative; padding: 38px 36px; border-radius: 28px; }
.rk27-way__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.rk27-way__badge svg { width: 16px; height: 16px; }
.rk27-way h3 { margin-top: 16px; font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: .05em; }
.rk27-way__desc { margin-top: 10px !important; font-size: 15px; line-height: 1.8; }
.rk27-way--line {
	display: flex;
	flex-direction: column;
	background: radial-gradient(circle at 0% 0%, rgba(0, 177, 200, .4), transparent 55%), var(--s);
	box-shadow: 0 30px 60px -32px rgba(0, 40, 60, .7);
	color: #fff;
}
.rk27-way--line .rk27-way__badge { align-self: flex-start; background: rgba(255, 255, 255, .14); }
.rk27-way__cover { margin-bottom: 22px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .55); transform: rotate(-1.5deg); }
.rk27-way__cover img { width: 100%; border-radius: 9px; }
.rk27-way--line .rk27-way__desc { color: rgba(255, 255, 255, .85); }
.rk27-way__perks { display: grid; gap: 12px; margin-top: 22px; }
.rk27-way__perks li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.6; }
.rk27-way__perks .rk27-check { background: var(--gr); color: #fff; }
.rk27-way__foot { margin-top: auto; padding-top: 34px; }
.rk27-way--form { background: #fff; box-shadow: 0 30px 60px -32px rgba(0, 60, 90, .55); color: var(--s); }
.rk27-way--form .rk27-way__badge { background: rgba(0, 177, 200, .12); color: var(--t-d); }
.rk27-way--form .rk27-way__desc { color: var(--g); }

/* WPForms（僅限此頁表單） */
.rk27-form { margin-top: 26px; }
.rk27-form .wpforms-container { margin: 0 !important; }
.rk27-form .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: end; }
.rk27-form .wpforms-form .wpforms-field { grid-column: 1 / -1; margin: 0 !important; padding: 0 0 18px !important; max-width: none !important; }
.rk27-form .wpforms-form [id$="-field_0-container"],
.rk27-form .wpforms-form [id$="-field_1-container"],
.rk27-form .wpforms-form [id$="-field_12-container"],
.rk27-form .wpforms-form [id$="-field_5-container"],
.rk27-form .wpforms-form [id$="-field_13-container"],
.rk27-form .wpforms-form [id$="-field_14-container"] { grid-column: auto; }
.rk27-form .wpforms-form .wpforms-field-label,
.rk27-form .wpforms-form .wpforms-field legend.wpforms-field-label { margin: 0 0 8px !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--s) !important; }
.rk27-form .wpforms-form .wpforms-required-label { color: var(--r) !important; }
.rk27-form .wpforms-form input[type="text"],
.rk27-form .wpforms-form input[type="email"],
.rk27-form .wpforms-form input[type="tel"],
.rk27-form .wpforms-form input[type="number"],
.rk27-form .wpforms-form select,
.rk27-form .wpforms-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	height: 50px !important;
	padding: 0 16px !important;
	border: 1.5px solid rgba(64, 82, 94, .22) !important;
	border-radius: 12px !important;
	background-color: #fff !important;
	box-shadow: none !important;
	font-size: 15px !important;
	color: var(--s) !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.rk27-form .wpforms-form input:focus,
.rk27-form .wpforms-form select:focus,
.rk27-form .wpforms-form textarea:focus { border-color: var(--t) !important; box-shadow: 0 0 0 4px rgba(0, 177, 200, .14) !important; outline: none !important; }
.rk27-form .wpforms-form .wpforms-field-checkbox ul,
.rk27-form .wpforms-form .wpforms-field-radio ul { display: grid; gap: 10px; }
.rk27-form .wpforms-form .wpforms-field-checkbox li,
.rk27-form .wpforms-form .wpforms-field-radio li { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 12px 14px !important; border: 1.5px solid rgba(64, 82, 94, .14); border-radius: 12px; font-size: 14.5px; line-height: 1.55; }
.rk27-form .wpforms-form .wpforms-field-checkbox li input,
.rk27-form .wpforms-form .wpforms-field-radio li input { margin-top: 4px !important; accent-color: var(--t); }
.rk27-form .wpforms-form .wpforms-field-checkbox li label,
.rk27-form .wpforms-form .wpforms-field-radio li label { margin: 0 !important; font-size: 14.5px !important; color: var(--s) !important; }
.rk27-form .wpforms-form .wpforms-field-description { margin: -2px 0 10px !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--g) !important; }
.rk27-form .wpforms-form [id$="-field_20-container"] ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rk27-form .wpforms-form [id$="-field_20-container"] li { padding: 10px 12px !important; }
.rk27-form .wpforms-form .wpforms-submit-container { margin: 0 !important; padding-top: 6px !important; }
.rk27-form .wpforms-form button[type="submit"] {
	width: 100% !important;
	height: auto !important;
	min-height: 56px;
	padding: 14px 24px !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--t) !important;
	box-shadow: 0 5px 0 0 var(--t-d) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	color: #fff !important;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.rk27-form .wpforms-form button[type="submit"]:hover { transform: translateY(3px); box-shadow: 0 2px 0 0 var(--t-d) !important; }
.rk27-form .wpforms-form label.wpforms-error, .rk27-form .wpforms-form em.wpforms-error { margin-top: 6px; font-size: 13px !important; color: var(--r) !important; }
.rk27-form .wpforms-confirmation-container-full {
	margin: 0 !important;
	padding: 22px 24px !important;
	border: 1.5px solid rgba(131, 179, 98, .55) !important;
	border-radius: 16px !important;
	background: rgba(131, 179, 98, .12) !important;
	font-size: 15px;
	line-height: 1.8;
	color: var(--s) !important;
}

/* ---------- about ---------- */
.rk27-about { padding: 0 0 110px; }
.rk27-about__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 44px;
	align-items: center;
	padding: 46px 50px;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 26px 60px -30px rgba(0, 60, 90, .45);
}
.rk27-about .rk27-h2 { font-family: var(--en); font-size: clamp(24px, 2.6vw, 30px); }
.rk27-about__panel > div > p { margin-top: 12px; font-size: 15px; line-height: 1.9; color: var(--g); }
.rk27-about__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.rk27-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 2px solid rgba(0, 177, 200, .3); font-size: 15px; font-weight: 700; color: var(--t-d); transition: border-color .2s, gap .2s; }
.rk27-link:hover { gap: 10px; border-color: var(--t); color: var(--t-d); }
.rk27-link svg { width: 16px; height: 16px; }
.rk27-about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rk27-about__stat { padding: 20px 22px; border-radius: 18px; background: rgba(0, 177, 200, .07); }
.rk27-about__stat b { display: block; font-family: var(--en); font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--t); }
.rk27-about__stat:nth-child(2) b, .rk27-about__stat:nth-child(3) b { color: var(--o); }
.rk27-about__stat span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; }

/* ---------- floating download ---------- */
/* 外觀與位置由全站 rk-geo-whitepaper-float.php（.rk-geo-wp-float，仿 LINE 浮動按鈕）提供；這裡只控制本頁何時出現 */
.rk27-float { opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.rk27-float.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------- reveal ---------- */
.rk27-js .rk27-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.rk27-js .rk27-reveal.is-in { opacity: 1; transform: none; }
.rk27-js .rk27-ch.rk27-reveal.is-in:hover, .rk27-js .rk27-case.rk27-reveal.is-in:hover { transform: translateY(-4px); transition-delay: 0s; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.rk27-hero__grid { gap: 48px; }
	.rk27-hero__ctas { grid-template-columns: 1fr; }
	.rk27-ch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rk27-monitor__grid { gap: 40px; }
}
@media (max-width: 900px) {
	.rk27-hero { padding: 128px 0 124px; }
	.rk27-hero__ctas { grid-template-columns: repeat(2, 1fr); }
	.rk27-hero__grid { grid-template-columns: 1fr; gap: 64px; }
	.rk27-hero__visual { width: 100%; max-width: 560px; margin: 0 auto; }
	.rk27-cover { transform: none; }
	.rk27-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
	.rk27-stat:nth-child(odd)::before { display: none; }
	.rk27-pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rk27-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rk27-case--feat { grid-column: 1 / -1; }
	.rk27-dl__grid { grid-template-columns: 1fr; }
	.rk27-monitor__grid { grid-template-columns: 1fr; }
	.rk27-way__cover { display: none; }
	.rk27-about__panel { grid-template-columns: 1fr; padding: 38px 30px; }
}
@media (max-width: 640px) {
	.rk27-wrap { padding: 0 18px; }
	.rk27-sec { padding: 70px 0; }
	.rk27-head { margin-bottom: 40px; }
	.rk27-btn { padding: 12px 24px; font-size: 16px; white-space: normal; text-align: center; }
	.rk27-hero__ctas { grid-template-columns: 1fr; width: 100%; }
	.rk27-hero__ctas .rk27-btn, .rk27-center .rk27-btn { flex: 1 1 100%; width: 100%; }
	.rk27-chip { font-size: 13.5px; padding: 7px 14px 7px 7px; }
	.rk27-chip__ic { width: 28px; height: 28px; }
	.rk27-chip--a { top: -20px; left: -6px; }
	.rk27-chip--b { right: 4px; bottom: -24px; }
	.rk27-badge { top: -34px; right: -6px; width: 82px; height: 82px; font-size: 12.5px; }
	.rk27-badge span { font-size: 18px; }
	.rk27-stats__panel { padding: 28px 22px 20px; border-radius: 22px; }
	.rk27-stats__grid { column-gap: 32px; }
	.rk27-stat + .rk27-stat::before { left: -16px; }
	.rk27-stat__label { font-size: 15px; }
	.rk27-pain, .rk27-dl { padding: 76px 0; }
	.rk27-pain__grid, .rk27-ch__grid, .rk27-cases__grid { grid-template-columns: 1fr; }
	.rk27-shot--1, .rk27-shot--2 { width: 100%; }
	.rk27-shot--2 { margin-top: 34px; }
	.rk27-form .wpforms-form [id$="-field_20-container"] ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rk27-pain__item { border-radius: 20px; }
	.rk27-bracket { padding: 14px 30px; }
	.rk27-bracket::before, .rk27-bracket::after { width: 17px; height: 17px; }
	.rk27-sheet { border-radius: 28px; }
	.rk27-case, .rk27-case--feat { padding: 26px 22px; }
	.rk27-case__actions { grid-template-columns: 1fr; }
	.rk27-preview__head { align-items: center; }
	.rk27-preview__head p { display: none; }
	.rk27-way { padding: 30px 22px; }
	.rk27-way h3 { font-size: 22px; }
	.rk27-form .wpforms-form .wpforms-field-container { grid-template-columns: 1fr; }
	.rk27-about { padding-bottom: 80px; }
	.rk27-about__panel { padding: 30px 22px; }
	/* 手機版 LINE 按鈕為 right 20 / bottom 81 / 86px */
}
@media (prefers-reduced-motion: reduce) {
	.rk27 *, .rk27 *::before, .rk27 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.rk27-js .rk27-reveal { opacity: 1; transform: none; }
	.rk27-cover { transform: none; }
}

/* GTM：點到 LINE 按鈕的圖示時，讓點擊落在 <a> 本身，Click Text 才會包含「白皮書」 */
.rk27 [data-rk27-line] svg { pointer-events: none; }