/* Checkout market picker and the welcome page: an illustrated, outlined take on the brand
   (thick ink outlines, solid drop shadows, a mowed-lawn header). Builds on styles.css. */

body.checkout {
  --ink: #0B2014;
  --paper: #F7F4E9;
  --card: #FFFFFF;
  --pick: #EDF6D5;
  --art: #E6F2C9;
  --chip: #F1EEE2;
  --warn: #FFF1C9;
  --ck-text: #0B2014;
  --ck-text-2: #3E4A43;
  --ck-text-3: #69736C;
  --ck-link: #2F6B2A;
  --divider: #E3DFD1;
  --edge: #0B2014;
  --drop: #0B2014;
  --leaf: #5DB849;
  --display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  min-height: 100%;
  background: var(--paper);
  color: var(--ck-text);
  color-scheme: light;
}
:root[data-theme="dark"] body.checkout {
  --paper: #0E1411;
  --card: #18211C;
  --pick: #22321F;
  --art: #243324;
  --chip: #1F2923;
  --warn: #332C17;
  --ck-text: #EEF1EF;
  --ck-text-2: #C6CEC9;
  --ck-text-3: #98A39C;
  --ck-link: #ACD25C;
  --divider: #2A362F;
  --edge: #3A4A40;
  --drop: #040806;
  color-scheme: dark;
}

/* ---------- header: mowed stripes, rolling hills ---------- */
.ck-hero {
  position: relative; overflow: hidden; color: #fff;
  background: repeating-linear-gradient(90deg, #13361F 0 72px, #173E24 72px 144px);
}
.ck-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 16px 20px; }
.ck-top .logo { height: 40px; width: auto; display: block; }
:root .ck-top .ck-signin {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.3); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
:root .ck-top .ck-signin:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

.ck-hero-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 760px; margin: 0 auto; padding: 18px 20px 0; }
.ck-hero h1 { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: 46px; line-height: 1.04; letter-spacing: -0.015em; }
.ck-hero .lede { max-width: 520px; margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
.trial-badge {
  display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px;
  background: var(--brand-lime); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  font: 800 12px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg);
}
.mascot {
  flex: none; width: 112px; height: 112px; padding: 5px; background: #fff; border-radius: 30px;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(6deg);
  animation: ck-bob 4.5s ease-in-out infinite;
}
@keyframes ck-bob { 0%, 100% { transform: rotate(6deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-6px); } }

/* Height never drops below 5vw, so the slice only ever crops the sides of the scene. The negative
   margin lets the ground cover the header's last (fractional) pixel row, so no dark seam shows. */
.ck-grass { display: block; width: 100%; height: max(88px, 5vw); margin: 4px 0 -2px; }
.ck-grass path, .ck-grass circle { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ck-grass .hills { fill: #3F7A35; }
.ck-grass .trunk { fill: #6B4E2E; stroke-width: 2.5; }
.ck-grass .canopy { fill: #4A8C3F; }
.ck-grass .ground { fill: var(--paper); }
.ck-grass .tufts path { fill: var(--leaf); stroke-width: 2.5; }
.ck-grass .stem { fill: none; stroke-width: 2.5; }
.ck-grass .petals { fill: #fff; stroke-width: 2.5; }
.ck-grass .eye { fill: var(--brand-lime); stroke: none; }
.ck-grass .mower path, .ck-grass .mower circle { stroke-width: 2.8; }
.ck-grass .mower .line { fill: none; stroke-width: 2.5; opacity: .6; }
.ck-grass .mower .handle { fill: none; stroke-width: 3.2; }
.ck-grass .mower .grip { fill: none; stroke-width: 5; }
.ck-grass .engine { fill: var(--brand-lime); }
.ck-grass .deck { fill: #4A8C3F; }
.ck-grass .wheel { fill: #fff; }

/* ---------- steps ---------- */
.checkout-main { max-width: 760px; margin: 0 auto; padding: 14px 20px 48px; }
.ck-step { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; font: 800 21px/1.2 var(--display); font-stretch: 106%; letter-spacing: -0.01em; }
.step-num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--brand-lime); color: var(--ink); border: 2.5px solid var(--edge); box-shadow: 0 3px 0 var(--drop);
  font-size: 14px; font-stretch: 100%;
}

/* ---------- plans ---------- */
.plan-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 32px; }
.plan {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 18px; border-radius: 22px;
  background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 5px 0 var(--drop); cursor: pointer;
  transition: transform .2s var(--bounce), box-shadow .2s var(--bounce), background-color .15s;
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--drop); }
.plan:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--drop); }
.plan.is-on { background: var(--pick); }
.plan input, .market input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:focus-visible), .market:has(input:focus-visible) { outline: 3px solid var(--brand-600); outline-offset: 3px; }
.plan-art { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--art); border: 2.5px solid var(--edge); }
.plan-art svg { width: 58px; height: 44px; overflow: visible; }
.plan.is-on .plan-art svg { animation: ck-hop .45s var(--bounce); }
@keyframes ck-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-5px) rotate(-4deg); } 100% { transform: translateY(0); } }
.plan-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-body b { font: 800 19px/1.15 var(--display); font-stretch: 108%; }
.plan .price { font-size: 13px; color: var(--ck-text-2); }
.plan .price strong { font: 800 28px/1.05 var(--display); color: var(--ck-text); margin-right: 3px; letter-spacing: -0.01em; }
.plan-detail { font-size: 12.5px; color: var(--ck-text-3); }
.tick {
  flex: none; align-self: flex-start; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--edge); background: var(--card); display: grid; place-items: center;
  transition: background-color .15s, transform .25s var(--bounce);
}
.plan.is-on .tick, .market.is-on .box { background-color: var(--brand-600); }
.plan.is-on .tick { transform: scale(1.1); }
.plan.is-on .tick::after, .market.is-on .box::after {
  content: ""; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.3 6.4L4.9 9L9.7 3.3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- notices ---------- */
.checkout .notice {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding: 14px 16px; border-radius: 18px;
  border: 2px solid var(--edge); background: var(--warn); box-shadow: 0 3px 0 var(--drop); font-size: 13.5px; line-height: 1.5; color: var(--ck-text);
}
.checkout .notice-plain { background: var(--pick); }
.checkout .notice a { color: inherit; font-weight: 600; }
.notice-icon { flex: none; width: 30px; height: 30px; margin-top: -2px; }
.notice-icon * { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- markets: a search box that opens a grouped checklist ---------- */
.picker { position: relative; }
.picker.is-open { z-index: 6; } /* over the sticky total bar while the list is open */
.picker-field {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 16px; border-radius: 18px;
  background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 4px 0 var(--drop);
  transition: box-shadow .15s, border-radius .15s;
}
.picker-field:focus-within { box-shadow: 0 4px 0 var(--drop), 0 0 0 5px rgba(74,140,63,.22); }
.picker.is-open .picker-field { border-radius: 18px 18px 0 0; border-bottom-color: var(--divider); box-shadow: none; }
.picker-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ck-text-3); stroke-width: 2.2; stroke-linecap: round; }
.picker-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 500 15px var(--font); color: var(--ck-text); }
.picker-input::placeholder { color: var(--ck-text-3); opacity: 1; }
.picker-toggle { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--chip); color: var(--ck-text); }
.picker-toggle:hover { background: var(--pick); }
.picker-toggle:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.picker-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--bounce); }
.picker.is-open .picker-toggle svg { transform: rotate(180deg); }
.picker-panel {
  border: 2.5px solid var(--edge); border-top: 0; border-radius: 0 0 18px 18px; background: var(--card);
  box-shadow: 0 5px 0 var(--drop), 0 18px 36px rgba(11,32,20,.16); overflow: hidden;
}
.picker-list { max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; }
.opt-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px; background: var(--card);
  font: 700 11.5px/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--ck-text-3);
}
.opt-head span { padding: 1px 7px; border-radius: 999px; background: var(--chip); font: 600 11px/1.5 var(--font); letter-spacing: 0; }
.market { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background-color .12s; }
.market:hover { background: var(--chip); }
.market.is-on { background: var(--pick); }
.box {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--edge); background: var(--card); transition: background-color .15s, transform .22s var(--bounce);
}
.market.is-on .box { transform: rotate(-8deg) scale(1.06); }
.opt-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.opt-text b { flex: none; font-size: 14.5px; font-weight: 600; }
.opt-text span { min-width: 0; margin-left: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--ck-text-3); }
.picker-empty { padding: 22px 18px; font-size: 13.5px; color: var(--ck-text-3); }
.picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-top: 1.5px solid var(--divider); }
#pickerCount { font-size: 13px; font-weight: 600; color: var(--ck-text-2); }
.picker-done {
  height: 36px; padding: 0 20px; border-radius: 999px; background: var(--brand-lime); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 800 13.5px/1 var(--display);
  transition: transform .16s var(--bounce), box-shadow .16s var(--bounce);
}
.picker-done:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.picker-done:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.chips:empty, .picker.is-open .chips { display: none; }
/* While the list is open its footer shows the count, so the total bar steps aside instead of peeking out under it. */
#marketForm:has(.picker.is-open) .checkout-bar { visibility: hidden; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 14px; border-radius: 999px;
  background: var(--pick); color: var(--ck-text); border: 2px solid var(--edge); box-shadow: 0 2px 0 var(--drop);
  font: 600 13px/1 var(--font);
}
.chip.is-new { animation: ck-pop .32s var(--bounce); }
@keyframes ck-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.chip-x {
  width: 20px; height: 20px; border-radius: 50%; transition: transform .18s var(--bounce);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 2.5L7.5 7.5M7.5 2.5L2.5 7.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.chip:hover .chip-x { transform: scale(1.15) rotate(90deg); }
.chip:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 2px; }
.chip-clear { height: 34px; padding: 0 8px; border: 0; background: none; font: 600 13px var(--font); color: var(--ck-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- total and button ---------- */
.checkout-bar {
  position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 28px; padding: 12px 12px 12px 22px; border-radius: 26px; background: var(--brand-950); color: #fff;
  border: 2.5px solid var(--ink); box-shadow: 0 6px 0 var(--drop), 0 18px 36px rgba(11,32,20,.22);
}
:root[data-theme="dark"] .checkout-bar { border-color: #2E4A35; }
.bar-text { display: flex; flex-direction: column; min-width: 0; }
#summary { font-size: 12.5px; color: rgba(255,255,255,.72); }
#total { font: 800 26px/1.15 var(--display); color: var(--brand-lime); letter-spacing: -0.01em; }
#total:empty { display: none; }
.ck-go, :root a.ck-go {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px 0 26px;
  border-radius: 999px; background: var(--brand-lime); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 #040C07;
  font: 800 15.5px/1 var(--display); font-stretch: 104%; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce), background-color .15s;
}
.ck-go::after {
  content: ""; width: 18px; height: 18px; transition: transform .2s var(--bounce);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9H14.5M10 4.5L14.5 9L10 13.5' fill='none' stroke='%230B2014' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ck-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 #040C07; background-color: #B9DC6E; }
.ck-go:hover:not(:disabled)::after { transform: translateX(3px); }
.ck-go:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #040C07; }
.ck-go:focus-visible { outline: 3px solid var(--brand-lime); outline-offset: 3px; }
.ck-go:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.16); box-shadow: none; cursor: default; }
.ck-go:disabled::after { filter: invert(1); opacity: .45; }

.fine { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--ck-text-3); }
.fine a { color: var(--ck-link); font-weight: 500; }
.checkout-bar + .fine { margin-top: 20px; }

/* ---------- welcome page ---------- */
.welcome {
  max-width: 720px; margin: 14px auto 56px; padding: 28px 30px 26px; border-radius: 26px;
  background: var(--card); border: 2.5px solid var(--edge); box-shadow: 0 6px 0 var(--drop);
}
.welcome ol { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 16px; }
.welcome li { counter-increment: step; display: flex; gap: 14px; font-size: 15px; line-height: 1.5; color: var(--ck-text-2); }
.welcome li::before {
  content: counter(step); flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -3px; border-radius: 50%;
  background: var(--brand-lime); color: var(--ink); border: 2.5px solid var(--edge); box-shadow: 0 3px 0 var(--drop);
  font: 800 14px/1 var(--display);
}
.welcome li b { color: var(--ck-text); }
.welcome .ck-go { margin-top: 26px; }
.welcome .fine { margin-top: 20px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .mascot, .plan.is-on .plan-art svg, .chip.is-new { animation: none; }
  .plan, .market, .ck-go, .tick, .box, .picker-toggle svg { transition: none; }
}

@media (max-width: 600px) {
  .ck-top { padding: 12px 16px; }
  .ck-top .logo { height: 30px; }
  .ck-hero-inner { align-items: flex-start; gap: 14px; padding: 10px 16px 0; }
  .ck-hero h1 { font-size: 34px; }
  .ck-hero .lede { margin-top: 16px; font-size: 14.5px; }
  .mascot { width: 72px; height: 72px; padding: 3px; border-radius: 20px; border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); }
  .checkout-main { padding: 10px 16px 40px; }
  .plan-list { grid-template-columns: 1fr; gap: 14px; }
  .picker-input { font-size: 16px; } /* 16px keeps iPhone Safari from zooming in on focus */
  .opt-text { flex-direction: column; align-items: flex-start; gap: 1px; }
  .opt-text span { margin-left: 0; white-space: normal; }
  .checkout-bar { flex-direction: column; align-items: stretch; gap: 10px; bottom: 10px; padding: 14px; border-radius: 22px; }
  .bar-text { padding: 0 6px; }
  .ck-go { width: 100%; }
  .welcome { margin: 10px 16px 40px; padding: 22px 20px; }
}