/*
 * GP Garden Planner: the Premium pricing page (2.5.6).
 * The planner's own type (Young Serif for headings, Atkinson Hyperlegible
 * for reading) and colours, so the page and the app in its phones match.
 */

.gpp {
	--hedge: #16362A;
	--hedge-2: #1E4634;
	--moss: #245E36;
	--leaf: #3FA35C;
	--sage: #EEF5EF;
	--line: #DCE7DD;
	--pollen: #F2B13A;
	--pollen-hi: #F6C25E;
	--ink: #1D2B23;
	--soft: #56665C;
	--mist: #D3E6D8;
	--serif: "Young Serif", Georgia, "Times New Roman", serif;
	--sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-family: var(--sans);
	color: var(--ink);
	font-size: 17px;
	line-height: 1.55;
	max-width: 1120px;
	margin: 0 auto;
}
.gpp.alignwide { max-width: min(1120px, 100%); margin-left: auto; margin-right: auto; width: auto; }
.gpp *, .gpp *::before, .gpp *::after { box-sizing: border-box; }
:where(.gpp) :where(h2, h3, h4, p, ul, figure, details, table) { margin: 0; padding: 0; }
.gpp > * { margin-block: 0; }
.gpp :is(h2, h3, h4) { font-family: var(--serif); font-weight: 400; color: inherit; letter-spacing: -0.01em; text-transform: none; }
.gpp a { text-decoration: none; }
.gpp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gpp > section { margin: 0 0 72px; }

.gpp-h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.12; margin-bottom: 16px; }
.gpp-center { text-align: center; }
.gpp-body { max-width: 34em; color: var(--soft); font-size: 1.06rem; line-height: 1.65; }

/* ---- Buttons (the same classes the checkout script looks for) ---- */

.gpp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 13px 30px; border-radius: 999px; font: 700 1.04rem/1.2 var(--sans); cursor: pointer; border: 0; text-align: center; transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.gpp-btn-gold { background: var(--pollen); color: var(--hedge); box-shadow: 0 10px 24px -12px rgba(242, 177, 58, .9); }
.gpp-btn-gold:hover { background: var(--pollen-hi); color: var(--hedge); transform: translateY(-1px); }
.gpp-btn-quiet { background: #fff; color: var(--moss); box-shadow: inset 0 0 0 2px var(--moss); }
.gpp-btn-quiet:hover { background: var(--sage); color: var(--moss); }
.gpp-btn:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }
.gpp-current { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--sage); color: var(--moss); font-weight: 700; font-size: .94rem; }
.gpp-current.is-premium { background: rgba(242, 177, 58, .18); color: var(--pollen); }

/* ---- Hero: two phones ---- */

.gpp-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	padding: 64px 56px 0;
	border-radius: 36px;
	background:
		radial-gradient(70% 90% at 85% 30%, rgba(63, 163, 92, .38) 0%, rgba(63, 163, 92, 0) 60%),
		radial-gradient(50% 60% at 0% 100%, rgba(242, 177, 58, .14) 0%, rgba(242, 177, 58, 0) 70%),
		var(--hedge);
	color: #fff;
	overflow: hidden;
}
.gpp-hero-text { min-width: 0; padding-bottom: 64px; }
.gpp-h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1.04; color: #fff; max-width: 11em; }
.gpp-lede { margin-top: 22px; font-size: 1.14rem; line-height: 1.62; color: var(--mist); max-width: 30em; }
.gpp-hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.gpp-link { color: #fff; font-weight: 700; border-bottom: 2px solid rgba(255, 255, 255, .35); padding-bottom: 1px; }
.gpp-link:hover, .gpp-link:focus-visible { border-color: var(--pollen); }
.gpp-hero-price { margin-top: 16px; color: var(--mist); font-size: .95rem; }

.gpp-stage { position: relative; height: 600px; align-self: end; }
.gpp-stage .gpp-phone.is-big { position: absolute; right: 8px; top: 0; }
.gpp-stage .gpp-phone.is-small { position: absolute; left: 0; top: 150px; z-index: 2; }

/* ---- A phone, with a 390 px-wide app inside, scaled to fit ---- */

.gpp-phone {
	--w: 300px;
	--pad: 11px;
	--s: .7128;
	width: var(--w);
	aspect-ratio: 300 / 630;
	padding: var(--pad);
	border-radius: 48px;
	background: linear-gradient(160deg, #26352D, #0D1712 60%);
	box-shadow: 0 40px 70px -24px rgba(5, 15, 10, .65), 0 0 0 1.5px rgba(255, 255, 255, .08) inset;
	position: relative;
	flex: none;
}
.gpp-phone.is-small { --w: 236px; --pad: 9px; --s: .559; border-radius: 40px; }
.gpp-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #F6F1E6; }
.gpp-phone.is-small .gpp-phone-screen { border-radius: 31px; }
.gpp-phone-inner { position: absolute; top: 0; left: 0; width: 390px; height: calc(100% / var(--s)); transform: scale(var(--s)); transform-origin: 0 0; }
.gpp-phone-island { position: absolute; top: calc(var(--pad) + 10px); left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 999px; background: #0B1410; }
.gpp-phone.is-small .gpp-phone-island { height: 17px; top: calc(var(--pad) + 8px); }
.gpp-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: none; }
.gpp-phone-inner:has(> .gpp-shot) { transform: none; width: 100%; height: 100%; }
.gpp-shot-bg { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center top; background-size: cover; }
.gpp-phone-inner.is-shot { transform: none; width: 100%; height: 100%; }
.gpp .gpp-phone .gpp-shot { max-width: none; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }

/* The app, at a phone's real size (390 px wide). */
.gpp-app { position: relative; width: 390px; height: 100%; overflow: hidden; background: #F6F1E6; color: var(--ink); font: 400 16px/1.4 var(--sans); }
.gpp-app b { font-weight: 700; }
.gpp-status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 16px 30px 0 40px; font-size: 16px; font-weight: 700; color: var(--ink); }
.gpp-status svg { width: 66px; height: 14px; fill: currentColor; }

.gpp-plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gpp-app-top { position: absolute; top: 62px; left: 14px; right: 14px; z-index: 3; display: flex; gap: 10px; }
.gpp-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 22px; background: rgba(255, 253, 248, .95); box-shadow: 0 6px 18px -8px rgba(20, 40, 25, .45); }
.gpp-pill-name b { display: block; font: 400 22px/1.1 var(--serif); }
.gpp-pill-name small { display: block; font-size: 13px; color: var(--soft); }
.gpp-tick { width: 32px; height: 32px; border-radius: 10px; background: #E5EEDD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23245E36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.gpp-pill-wx { padding: 9px 16px; font-size: 21px; font-weight: 700; }
.gpp-pill-wx svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; }

.gpp-sheet { position: absolute; left: 12px; right: 12px; bottom: 104px; z-index: 3; padding: 18px; border-radius: 28px; background: #FFFDF8; box-shadow: 0 16px 34px -14px rgba(20, 40, 25, .55); }
.gpp-sheet-head { display: flex; gap: 14px; align-items: center; }
.gpp-sheet-head b { display: block; font: 400 23px/1.15 var(--serif); }
.gpp-sheet-head small { display: block; margin-top: 2px; color: var(--soft); font-size: 14px; }
.gpp-thumb { width: 60px; height: 60px; flex: none; border-radius: 16px; background: radial-gradient(circle at 50% 22%, #E2552D 0 9px, transparent 10px), radial-gradient(circle at 30% 70%, #6EAE5A 0 18px, transparent 19px), radial-gradient(circle at 72% 64%, #3C7A40 0 20px, transparent 21px), #DDE9D2; }
.gpp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.gpp-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 8px; border-radius: 16px; background: #F3EEE3; text-align: center; }
.gpp-chip b { font-size: 16px; }
.gpp-chip small { font-size: 12.5px; color: var(--soft); }
.gpp-chip.is-frost { background: #E4EEF8; color: #1F4B72; }
.gpp-chip.is-frost small { color: #3E6A92; }

.gpp-tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-around; height: 92px; padding: 10px 6px 22px; background: #FBF8F1; border-top: 1px solid #E8E1D2; }
.gpp-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 20%; font-size: 12.5px; font-weight: 700; color: #4D5A52; }
.gpp-tab i { display: grid; place-items: center; width: 54px; height: 32px; border-radius: 16px; }
.gpp-tab svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gpp-tab.is-on { color: var(--moss); }
.gpp-tab.is-on i { background: #DCE8D4; }

/* Jobs */
.gpp-app.is-jobs { background: #F6F1E6 repeating-linear-gradient(0deg, transparent 0 23px, rgba(90, 110, 80, .06) 23px 24px); }
.gpp-jobs-head { padding: 14px 24px 6px; }
.gpp-jobs-title { font: 400 42px/1.05 var(--serif); }
.gpp-jobs-sub { margin-top: 6px; color: var(--soft); font-size: 16px; }
.gpp-jobs-bar { display: block; height: 9px; margin-top: 12px; border-radius: 9px; background: #E4DDCC; overflow: hidden; }
.gpp-jobs-bar i { display: block; height: 100%; border-radius: 9px; background: var(--moss); }
.gpp-alert { display: flex; gap: 14px; margin: 16px 18px 14px; padding: 16px; border-radius: 20px; background: #E7F0F8; box-shadow: inset 5px 0 0 #5A8DB8; color: #3A5670; font-size: 15.5px; }
.gpp-alert svg { width: 28px; height: 28px; flex: none; fill: #3C6E99; }
.gpp-alert b { display: block; margin-bottom: 2px; color: #1F4B72; font-size: 17px; }
.gpp-joblist { list-style: none; margin: 0 18px; padding: 0; display: grid; gap: 10px; }
.gpp-joblist li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 14px 16px; border-radius: 18px; background: #FFFDF8; box-shadow: 0 1px 0 rgba(30, 50, 35, .06); }
.gpp-joblist i { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2.5px solid #B7C5B3; }
.gpp-joblist b { display: block; font-size: 16.5px; line-height: 1.3; }
.gpp-joblist small { display: block; margin-top: 2px; color: var(--soft); font-size: 13.5px; }
.gpp-joblist li.is-done i { border-color: var(--moss); background: var(--moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.gpp-joblist li.is-done b { color: var(--soft); text-decoration: line-through; text-decoration-color: rgba(86, 102, 92, .5); }

/* A plant page */
.gpp-app.is-page { background: #fff; }
.gpp-app.is-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; }
.gpp-page-bar { display: flex; align-items: center; justify-content: center; height: 52px; border-bottom: 1px solid #ECEFE9; font: 400 21px var(--serif); color: var(--hedge); }
.gpp-page-hero { height: 230px; background: linear-gradient(140deg, #4C8A52, #16362A) center / cover no-repeat; }
.gpp-page-title { padding: 18px 22px 16px; }
.gpp-page-bot { font: italic 400 26px/1.15 var(--sans); color: var(--ink); }
.gpp-page-common { margin-top: 4px; color: var(--soft); font-size: 15px; }
.gpp-demo { padding: 0 14px; }
.gpp .gpp-demo-card { margin: 0; padding: 20px 18px 18px; font-size: 16px; }
.gpp .gpp-demo-card .gp-ccare-heading { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.gpp .gpp-demo-card .gp-ccare-item { grid-template-columns: 1fr; gap: 6px; }
.gpp .gpp-demo-card .gp-ccare-bar { margin-bottom: 12px; }
.gpp .gpp-demo-card .gp-ccare-mon { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
.gpp .gpp-demo-card .gp-ccare-mon.is-now { margin: 0 -10px; padding: 10px; }
.gpp .gpp-demo-card .gp-ccare-mon-h { flex-direction: row; align-items: center; gap: 8px; }

/* ---- Same plant, your climate ---- */

.gpp-climate { display: grid; grid-template-columns: minmax(0, 500px) auto; justify-content: center; gap: 88px; align-items: center; padding: 8px 0 0; }
.gpp-climates { display: grid; gap: 10px; margin-top: 28px; max-width: 420px; }
.gpp .gpp-climate-btn { appearance: none; display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 15px 20px; border: 1.5px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); font: inherit; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.gpp .gpp-climate-btn:hover { border-color: #B9CDBC; background: #FAFCF9; }
.gpp .gpp-climate-btn[aria-pressed="true"] { border-color: var(--moss); background: #F3F9F1; box-shadow: 0 0 0 1px var(--moss), 0 12px 26px -16px rgba(36, 94, 54, .6); }
.gpp .gpp-climate-btn:focus-visible { outline: 3px solid var(--pollen); outline-offset: 2px; }
.gpp-climate-btn b { display: block; font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.gpp-climate-btn small { display: block; margin-top: 1px; color: var(--soft); font-size: .92rem; }
.gpp-climate-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--line); }
.is-frost .gpp-climate-dot { background: #6FA3D2; }
.is-frost_free .gpp-climate-dot { background: #5DB47D; }
.is-mild .gpp-climate-dot { background: var(--pollen); }
.gpp-climate-btn[aria-pressed="true"] .gpp-climate-dot { box-shadow: 0 0 0 4px #F3F9F1, 0 0 0 5.5px var(--moss); }
.gpp-fine-dark { margin-top: 18px; max-width: 30em; color: var(--soft); font-size: .92rem; }
.gpp-climate-phone { position: relative; padding: 24px 28px; }
.gpp-climate-phone::before { content: ""; position: absolute; inset: 0 -10px; border-radius: 48%; background: radial-gradient(closest-side, rgba(63, 163, 92, .2), rgba(63, 163, 92, 0)); }

/* ---- The year ---- */

.gpp-year { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px; border-radius: 36px; background: var(--hedge); color: #fff; }
.gpp-year .gpp-h2 { color: #fff; }
.gpp-year .gpp-body { color: var(--mist); }
.gpp-facts { list-style: none; display: grid; gap: 0; margin-top: 28px; max-width: 30em; }
.gpp-facts li { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.gpp-facts b { color: #fff; }
.gpp-facts span { color: var(--mist); }
.gpp-wheel { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gpp-wheel-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.gpp .gpp-wheel-switch button { appearance: none; border: 0; margin: 0; padding: 8px 22px; border-radius: 999px; background: transparent; color: var(--mist); font: 700 .95rem var(--sans); cursor: pointer; line-height: 1.2; text-transform: none; letter-spacing: 0; box-shadow: none; min-height: 0; }
.gpp .gpp-wheel-switch button[aria-pressed="true"] { background: #fff; color: var(--hedge); }
.gpp .gpp-wheel-switch button:focus-visible { outline: 2px solid var(--pollen); outline-offset: 2px; }
.gpp-wheel-art { position: relative; width: min(100%, 320px); aspect-ratio: 1; }
.gpp-wheel-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gpp-month { fill: none; stroke-width: 30; stroke-linecap: butt; transition: stroke .5s ease calc(var(--i) * 45ms), opacity .5s ease calc(var(--i) * 45ms); }
.gpp-wheel.is-free .gpp-month { stroke: rgba(255, 255, 255, .12); }
.gpp-wheel.is-free .gpp-month[data-free="now"] { stroke: var(--c); }
.gpp-wheel.is-free .gpp-month[data-free="peek"] { stroke: var(--c); opacity: .45; stroke-dasharray: 4 5; }
.gpp-mlabel { fill: #A9C6B2; font: 700 12px var(--sans); }
.gpp-mlabel.is-now { fill: #fff; }
.gpp-wheel-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.gpp-wheel-n { font: 400 3.8rem/1 var(--serif); color: #fff; }
.gpp-wheel-word { margin-top: 4px; max-width: 9em; font-size: .9rem; line-height: 1.3; color: var(--mist); }
.gpp-wheel-cap { max-width: 22em; text-align: center; font-size: .92rem; line-height: 1.5; color: var(--mist); min-height: 3em; }

/* ---- Plans ---- */

.gpp-plans-wrap .gpp-h2 { margin-bottom: 28px; }
.gpp-plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; align-items: start; max-width: 980px; margin: 0 auto; }
.gpp-plan { display: flex; flex-direction: column; padding: 32px 32px 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.gpp-plan.is-premium { position: relative; background: linear-gradient(170deg, var(--hedge-2), var(--hedge) 70%); color: #fff; border: 2px solid var(--pollen); box-shadow: 0 26px 50px -20px rgba(22, 54, 42, .5); }
.gpp-plan-name { display: flex; align-items: center; gap: 8px; font-size: 1.5rem; }
.gpp-plan.is-premium .gpp-plan-name { color: var(--pollen); }
.gpp-prices { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.gpp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 14px; }
.gpp-prices .gpp-price { margin-top: 0; }
.gpp-price b { font: 400 2.9rem/1 var(--serif); }
.gpp-price span { font-size: .96rem; color: var(--soft); }
.gpp-price-alt { color: #C9DFCF; font-size: .95rem; }
.gpp-save { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(242, 177, 58, .18); color: var(--pollen); font-size: .86rem; font-weight: 700; }
.gpp-plan-for { margin-top: 16px; font-weight: 700; }
.gpp-list { list-style: none; margin: 16px 0 0; display: grid; gap: 11px; }
.gpp-list li { position: relative; margin: 0; padding-left: 32px; font-size: .99rem; line-height: 1.45; }
.gpp-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23245E36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.gpp-plan.is-premium .gpp-list li::before { background-color: var(--pollen); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%2316362A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gpp-plan-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.gpp-plan.is-premium .gpp-btn { flex: 1 1 auto; }
.gpp-fine { margin-top: 12px; font-size: .86rem; color: #C9DFCF; }
.gpp-fx { margin-top: 4px !important; font-size: .86rem; }
.gpp-pay-acts { flex-direction: column; align-items: stretch; }
.gpp .gpp-pay { position: relative; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 22px; border-radius: 18px; line-height: 1.25; }
.gpp-pay-main { font-size: 1.08rem; font-weight: 700; }
.gpp-pay-sub { font-size: .86rem; font-weight: 400; }
.gpp-pay-badge { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--hedge); font-size: .8rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.gpp-btn-line { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.gpp-btn-line:hover { background: rgba(255, 255, 255, .08); }

/* ---- Comparison ---- */

.gpp-table-wrap { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; }
.gpp-table { width: 100%; border-collapse: collapse; margin: 0; font-size: .97rem; table-layout: fixed; border: 0; }
.gpp-table th, .gpp-table td { padding: 14px 20px; border: 0; border-top: 1px solid #EDF2EE; text-align: left; vertical-align: middle; background: none; font-weight: 400; }
.gpp-table thead th { border-top: 0; background: #fff; font: 400 1.15rem var(--serif); padding-top: 20px; padding-bottom: 14px; }
.gpp-table thead th.gpp-col-premium { color: var(--moss); }
.gpp-table th:first-child { width: 44%; }
.gpp-table tbody th { font-weight: 400; color: var(--ink); }
.gpp-table .gpp-group th { padding-top: 22px; padding-bottom: 8px; border-top: 1px solid var(--line); font: 400 1.05rem var(--serif); color: var(--moss); background: var(--sage); }
.gpp-table td.gpp-col-premium, .gpp-table th.gpp-col-premium { background: rgba(242, 177, 58, .09); }
.gpp-table .gpp-group th { background: var(--sage); }
.gpp-yes { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sage); color: var(--moss); }
.gpp-col-premium .gpp-yes { background: var(--pollen); color: var(--hedge); }
.gpp-no { display: inline-flex; color: #B5C2B9; }
.gpp-val { font-size: .94rem; line-height: 1.4; color: var(--soft); }
.gpp-col-premium .gpp-val { color: var(--ink); font-weight: 700; }
.gpp-after-table { display: flex; justify-content: center; margin-top: 28px; }

/* ---- Questions ---- */

.gpp-faq { max-width: 780px; }
.gpp-q { border-top: 1px solid var(--line); }
.gpp-q:last-of-type { border-bottom: 1px solid var(--line); }
.gpp-q summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 400 1.14rem var(--serif); }
.gpp-q summary::-webkit-details-marker { display: none; }
.gpp-q summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2.5px solid var(--moss); border-bottom: 2.5px solid var(--moss); transform: rotate(45deg); transition: transform .2s ease; }
.gpp-q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.gpp-q summary:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; border-radius: 4px; }
.gpp-q p { padding: 0 0 20px; color: var(--soft); max-width: 40em; }

/* ---- Checkout: GP Stripe Membership's box, dressed to match ---- */

.gpp-join { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: start; padding: 44px; border-radius: 32px; background: var(--sage); scroll-margin-top: 24px; }
.gpp-join-text p { margin-top: 10px; color: var(--soft); }
.gpp-join-free a { color: var(--moss); font-weight: 700; border-bottom: 2px solid rgba(36, 94, 54, .3); }
.gpp-join-box .gpsm-box { margin: 0; padding: 24px; border: 2px solid var(--pollen); border-radius: 22px; background: #fff; }
.gpp-join-box .gpsm-summary { margin: 0 0 16px 1.1em; color: var(--soft); font-size: .94rem; }
.gpp-join-box .gpsm-actions { gap: 10px; }
.gpp-join-box .gpsm-actions form { flex: 1 1 auto; }
.gpp-join-box .gpsm-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 22px; border-radius: 999px; border: 0; background: var(--pollen); color: var(--hedge); font: 700 1rem var(--sans); flex: 1 1 200px; }
.gpp-join-box .gpsm-button:hover { background: var(--pollen-hi); }
.gpp-join-box .gpsm-button.gpsm-secondary { background: #fff; color: var(--moss); box-shadow: inset 0 0 0 2px var(--moss); }
.gpp-join-box .gpsm-button:focus-visible { outline: 3px solid var(--leaf); outline-offset: 3px; }
.gpp-join-box .gpsm-check { font-size: .9rem; color: var(--ink); }
.gpp-join-box .gpsm-check input { accent-color: var(--moss); }
.gpp-join-box .gpsm-fine { color: var(--soft); }
.gpp-join-box .gpsm-notice { border-radius: 12px; }
.gpp-join-box .gpsm-button.is-chosen { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--leaf); }

/* Text on the dark green stays light, whatever the theme sets. */
.gpp .gpp-hero, .gpp .gpp-hero :is(h2, p, span, b, strong), .gpp .gpp-year :is(h3, p, b, figcaption), .gpp .gpp-plan.is-premium, .gpp .gpp-plan.is-premium :is(h4, p, li, span, b, strong) { color: #fff !important; opacity: 1 !important; }
.gpp .gpp-hero .gpp-lede, .gpp .gpp-hero .gpp-hero-price, .gpp .gpp-year .gpp-body, .gpp .gpp-year .gpp-wheel-cap, .gpp .gpp-year .gpp-wheel-word, .gpp .gpp-year .gpp-facts span { color: var(--mist) !important; }
.gpp .gpp-hero .gpp-app, .gpp .gpp-hero .gpp-app :is(p, span, b, small) { color: inherit !important; }
.gpp .gpp-hero .gpp-app { color: var(--ink) !important; }
.gpp .gpp-hero .gpp-app small, .gpp .gpp-hero .gpp-jobs-sub { color: var(--soft) !important; }
.gpp .gpp-hero .gpp-alert { color: #3A5670 !important; }
.gpp .gpp-hero .gpp-alert b, .gpp .gpp-hero .gpp-chip.is-frost b { color: #1F4B72 !important; }
.gpp .gpp-hero .gpp-chip.is-frost small { color: #3E6A92 !important; }
.gpp .gpp-hero .gpp-tab { color: #4D5A52 !important; }
.gpp .gpp-hero .gpp-tab.is-on { color: var(--moss) !important; }
.gpp .gpp-hero .gpp-joblist li.is-done b { color: var(--soft) !important; }
.gpp .gpp-year .gpp-wheel-switch button { color: var(--mist) !important; }
.gpp .gpp-year .gpp-wheel-switch button[aria-pressed="true"] { color: var(--hedge) !important; }
.gpp .gpp-plan.is-premium .gpp-plan-name, .gpp .gpp-plan.is-premium .gpp-save, .gpp .gpp-hero .gpp-current.is-premium { color: var(--pollen) !important; }
.gpp .gpp-plan.is-premium .gpp-price span, .gpp .gpp-plan.is-premium .gpp-price-alt, .gpp .gpp-plan.is-premium .gpp-fine { color: #DCEBE0 !important; }
.gpp .gpp-btn-gold, .gpp .gpp-btn-gold span, .gpp .gpp-plan.is-premium .gpp-btn-gold span { color: var(--hedge) !important; }
.gpp .gpp-plan.is-premium .gpp-pay-badge { color: var(--hedge) !important; }
.gpp .gpp-btn-line, .gpp .gpp-plan.is-premium .gpp-btn-line span { color: #fff !important; }
.gpp .gpp-hero .gpp-link { color: #fff !important; }

/* Phones: Go Premium in reach. */
.gpp-sticky { position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 999; box-shadow: 0 10px 26px rgba(22, 54, 42, .35); display: none; }
.gpp-sticky small { font-weight: 400; opacity: .85; }

@media (max-width: 960px) {
	.gpp-hero { grid-template-columns: minmax(0, 1fr); padding: 44px 28px 0; gap: 8px; border-radius: 28px; }
	.gpp-hero-text { padding-bottom: 8px; }
	.gpp-stage { width: 470px; max-width: 100%; height: 600px; margin: 0 auto; }
	.gpp-climate { grid-template-columns: 1fr; gap: 24px; padding: 0; }
	.gpp-climate-phone { justify-self: center; }
	.gpp-year { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; border-radius: 28px; }
	.gpp-plans { grid-template-columns: 1fr; }
	.gpp-plan.is-premium { order: -1; }
	.gpp-join { grid-template-columns: 1fr; padding: 28px 20px; gap: 20px; }
	.gpp-sticky:not([hidden]) { display: inline-flex; }
}
@media (max-width: 560px) {
	.gpp { font-size: 16px; }
	.gpp > section { margin-bottom: 52px; }
	.gpp-hero { padding: 34px 20px 0; border-radius: 24px; }
	/* The two phones, a little smaller. */
	.gpp-stage { width: 470px; max-width: none; height: 600px; margin: 0 0 -198px 50%; transform: translateX(-50%) scale(.67); transform-origin: top center; }
	.gpp-climate-phone { padding: 8px 0; }
	.gpp-year { padding: 32px 20px; border-radius: 24px; }
	.gpp-plan { padding: 26px 20px 24px; }
	.gpp-table { font-size: .9rem; }
	.gpp-table th, .gpp-table td { padding: 12px 10px; }
	.gpp-table th:first-child { width: 40%; }
	.gpp-val { font-size: .84rem; }
	.gpp-table-wrap { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.gpp-month, .gpp-q summary::after, .gpp-btn, .gpp .gpp-climate-btn { transition: none; }
	.gpp-btn-gold:hover { transform: none; }
}