/* Ratin Special — product section redesign (#buy only).
   Loaded LAST in index-apple.html. Design only: no JS / IDs / API touched.
   Cards are shown/hidden by JS (inline display), so we never force "display" on hidden cards. */

#buy { padding: 112px 0 120px; background: #000; }

/* ---------- header ---------- */
#buy .section-head { display: block; text-align: center; max-width: 680px; margin: 0 auto 60px; }
#buy .section-head .eyebrow {
  display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 980px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #ffd60a; background: rgba(255,202,10,.12); }
#buy .section-head h2 { margin: 0 0 16px; font-size: clamp(36px, 6vw, 64px); line-height: 1.04; font-weight: 700; letter-spacing: -.04em; color: #f5f5f7; }
#buy .section-head p { margin: 0 auto; max-width: 38ch; font-size: clamp(16px, 2vw, 21px); line-height: 1.4; color: #a1a1a6; }

/* ---------- grid ---------- */
#buy .pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 370px));
  justify-content: center; align-items: stretch; gap: 22px; max-width: 1240px; margin: 0 auto; }

/* ---------- card: gradient border + coloured glow ---------- */
#buy .pricing-grid > .buy {
  --a: 110,110,255; --btn: linear-gradient(135deg,#8585ff,#4646e6); --btn-ink: #fff;
  display: flex; flex-direction: column; position: relative; flex: none; width: auto; min-width: 0;
  margin: 0 !important; padding: 30px 28px 28px; border-radius: 32px; text-align: left; overflow: hidden;
  color: #f5f5f7; border: 1px solid transparent;
  background:
    linear-gradient(#111114, #111114) padding-box,
    linear-gradient(160deg, rgba(var(--a),.8), rgba(255,255,255,.07) 36%, rgba(255,255,255,.05) 68%, rgba(var(--a),.35)) border-box; }
#buy .pricing-grid > .buy.buy--pr { --a: 192,86,255; --btn: linear-gradient(135deg,#d77cff,#9a3de0); }
#buy .buy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(75% 40% at 88% 0%, rgba(var(--a), .30) 0%, rgba(var(--a), 0) 72%),
              radial-gradient(60% 30% at 0% 100%, rgba(var(--a), .10) 0%, rgba(var(--a), 0) 70%); }
#buy .buy .buy-main > *, #buy .buy .buy-side > * { position: relative; z-index: 1; }
#buy .buy-main, #buy .buy-side { display: contents; }

/* order: who, what, price, buy, then what you get */
#buy .buy .prod-head      { order: 1; }
#buy .buy .buy-main > h2  { order: 2; }
#buy .buy .buy-main > p   { order: 3; }
#buy .buy .deal-banner    { order: 3; }
#buy .buy .plan-grid      { order: 4; }
#buy .buy .price          { order: 5; }
#buy .buy .promo          { order: 6; }
#buy .buy .usd-line,
#buy .buy .combo-save     { order: 7; }
#buy .buy .buy-actions    { order: 8; }
#buy .buy-side h3         { order: 9; }
#buy .buy-side ul         { order: 10; }

/* ---------- header ---------- */
#buy .buy .prod-head { justify-content: flex-start; align-items: center; gap: 16px; margin: 0 0 26px; }
#buy .prod-badge {
  flex: none; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  font-size: 25px; font-weight: 800; letter-spacing: -.03em;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 28px -10px rgba(var(--a), .8), inset 0 1px 0 rgba(255,255,255,.25); }
#buy .prod-badge--ae { background: linear-gradient(145deg, #1a1a8a, #00003d); color: #b0b0ff; }
#buy .prod-badge--pr { background: linear-gradient(145deg, #5a0fa0, #260048); color: #f0a0ff; }
#buy .buy--combo .prod-head .prod-badge + .prod-badge { margin-left: -28px; outline: 3px solid #16130a; }
#buy .prod-tag { text-align: left; font-size: 14px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #f5f5f7; line-height: 1.25; }
#buy .prod-tag small {
  display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 980px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: rgb(var(--a));
  background: rgba(var(--a), .14); border: 1px solid rgba(var(--a), .3); }

#buy .buy .buy-main > h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.12; font-weight: 700; letter-spacing: -.035em; text-align: left; }
#buy .buy .buy-main > p  { margin: 0 0 28px; font-size: 15px; line-height: 1.5; color: #9a9aa1; text-align: left; }
#buy .buy .deal-banner { margin: 0 0 18px !important; font-size: 14px; }

/* ---------- price + button (pinned to bottom so cards line up) ---------- */
#buy .buy .price {
  margin-top: auto; padding: 24px 0 0; font-size: 58px; line-height: 1; font-weight: 700; letter-spacing: -.05em;
  color: #f5f5f7 !important; -webkit-text-fill-color: #f5f5f7 !important; background: none !important; }
#buy .buy .price::before {
  content: ""; display: block; height: 1px; margin: -24px 0 24px;
  background: linear-gradient(90deg, rgba(var(--a), .6), rgba(255,255,255,.08) 60%, transparent); }
#buy .buy .price::after {
  content: "One-time payment \00B7  lifetime access"; display: block; margin-top: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: #86868b; -webkit-text-fill-color: #86868b; }
#buy .buy .price s.was {
  display: block; margin-bottom: 8px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; text-decoration: line-through;
  color: #6e6e73; -webkit-text-fill-color: #6e6e73; }
#buy .buy .promo { margin-top: 12px; font-size: 13px; font-weight: 600; color: #ff9f0a; text-align: left; }
#buy .buy .usd-line { margin-top: 8px; font-size: 13px; font-weight: 500; color: #a1a1a6; text-align: left; }
#buy .buy .combo-save {
  align-self: flex-start; margin-top: 14px; padding: 6px 12px; border-radius: 980px;
  font-size: 13px; font-weight: 600; color: #30d158; background: rgba(48,209,88,.14); }

#buy .buy .buy-actions { flex-direction: column; gap: 6px; margin-top: 22px; }
#buy .buy .buy-actions .btn { width: 100%; justify-content: center; }
#buy .buy .buy-actions .btn-primary {
  height: 56px; border-radius: 18px; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  background: var(--btn) !important; color: var(--btn-ink) !important;
  box-shadow: 0 14px 30px -14px rgba(var(--a), .9), inset 0 1px 0 rgba(255,255,255,.3) !important; }
#buy .buy .buy-actions .btn-primary::after { content: "\2192"; display: inline-block !important; margin-left: 10px; font-size: 18px; }
#buy .buy .buy-actions .btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
#buy .buy .buy-actions .btn-primary:disabled { background: #2a2a2d !important; color: #86868b !important; box-shadow: none !important; cursor: not-allowed; }
#buy .buy .buy-actions .btn-ghost { height: 42px; border: 0; background: transparent; font-size: 15px; color: rgb(var(--a)); }
#buy .buy .buy-actions .btn-ghost:hover { background: rgba(var(--a), .1); }

/* ---------- features: inset panel ---------- */
#buy .buy-side h3 {
  margin: 28px 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #86868b; text-align: left; }
#buy .buy-side ul {
  margin: 0; padding: 18px 18px; display: grid; gap: 15px; text-align: left; list-style: none;
  border-radius: 20px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
#buy .buy-side li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: #f5f5f7; }
#buy .buy .buy-side li svg {
  flex: none; width: 22px; height: 22px; padding: 5px; margin-top: 0; border-radius: 50%;
  background: rgba(var(--a), .2) !important; color: rgb(var(--a)) !important; }
#buy .buy-side li small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: #86868b; }

/* ---------- combo = featured ---------- */
#buy .pricing-grid > .buy.buy--combo {
  --a: 255,202,10; --btn: linear-gradient(135deg,#ffe14d,#ffca0a 55%,#f0b400); --btn-ink: #111100;
  background:
    linear-gradient(#16130a, #16130a) padding-box,
    linear-gradient(160deg, #ffd60a, rgba(255,202,10,.25) 40%, rgba(255,202,10,.12) 70%, rgba(255,202,10,.6)) border-box; }
#buy .buy.buy--combo::before {
  content: "\2605  Best value"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 6px 18px 7px; border-radius: 0 0 16px 16px; background: #ffca0a; color: #111100;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
#buy .buy--combo .prod-head { margin-top: 18px; }

#buy .plan-card { border-radius: 14px; }

/* Keep the two product cards compact enough to fit the storefront viewport. */
#buy .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 340px)); gap: 18px; }
#buy .pricing-grid > .buy { padding: 24px 22px 22px; border-radius: 28px; }
#buy .buy .shop-media { height: 132px; margin-bottom: 18px; border-radius: 17px; }
#buy .buy .prod-head { gap: 12px; margin-bottom: 18px; }
#buy .prod-badge { width: 54px; height: 54px; border-radius: 16px; font-size: 23px; }
#buy .buy .buy-main > h2 { font-size: 24px; margin-bottom: 8px; }
#buy .buy .buy-main > p { font-size: 14px; margin-bottom: 20px; }
#buy .buy .price { padding-top: 18px; font-size: 52px; }
#buy .buy .price::before { margin: -18px 0 18px; }
#buy .buy .buy-actions { margin-top: 16px; }
#buy .buy .buy-actions .add-cart { height: 46px; border-radius: 15px; font-size: 14px; }
#buy .buy .buy-actions .btn-primary { height: 48px; border-radius: 15px; font-size: 14px; }
#buy .buy-side h3 { margin: 20px 0 10px; }
#buy .buy-side ul { padding: 14px; gap: 11px; border-radius: 17px; }
#buy .buy-side li { font-size: 13.5px; }
#buy .buy-side li small { font-size: 12px; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  #buy { padding: 80px 0 88px; }
  #buy .section-head { margin-bottom: 40px; }
  #buy .pricing-grid { grid-template-columns: 1fr; gap: 20px; }
  #buy .pricing-grid > .buy { padding: 26px 20px 22px; border-radius: 28px; }
  #buy .buy .price { font-size: 50px; }
}

/* Rounded 4:5 product cards. On narrow screens the cards grow naturally so
   all product details remain visible without clipping. */
#buy .pricing-grid {
  max-width: 1240px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
#buy .pricing-grid > .buy {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* Let intrinsic content win when it needs more than the 4:5 target height. */
  min-height: min-content;
  border-radius: 24px;
}
#buy .buy .buy-main > h2 { min-height: 2.24em; }
#buy .buy .buy-main > p { min-height: 3em; }
#buy .buy .shop-media,
#buy .buy-side ul { border-radius: 12px; }
#buy .buy .buy-actions .add-cart,
#buy .buy .buy-actions .btn-primary { border-radius: 10px; }

@media (max-width: 1100px) {
  #buy .pricing-grid { grid-template-columns: minmax(0, 580px); }
  #buy .pricing-grid > .buy { justify-self: center; }
}
@media (max-width: 720px) {
  #buy .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  #buy .pricing-grid > .buy { aspect-ratio: auto; border-radius: 22px; }
}

/* ---- Gemini Pro card ---- */
#buy .pricing-grid > .buy.buy--gemini { --a: 66,133,244; --btn: linear-gradient(135deg,#7aa8ff,#4285f4 55%,#a76cf5); }
#buy .prod-badge--gemini { background: linear-gradient(145deg,#4285f4,#9b72f2 60%,#d96570); color: #fff; }
#buy .buy--gemini .shop-media { position: relative; height: 190px; margin-bottom: 18px; }
#buy .buy--gemini .shop-media img { opacity: 1; object-position: center 30%; }
#buy .buy--gemini .buy-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
#buy .pricing-grid > .buy.buy--gemini { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; overflow: visible; }
#buy .buy--gemini .price::after { content: none; }
#buy .buy--gemini .shop-media { order: 0; }

/* ---- Gemini direct-order modal ---- */
.gm-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.gm-modal[hidden]{display:none}
.gm-box{position:relative;width:100%;max-width:440px;background:#14171c;color:#ece9e2;border:1px solid #2a2f38;border-radius:16px;padding:22px;max-height:92vh;overflow:auto}
.gm-box h3{margin:0 34px 12px 0;font-size:18px}
.gm-x{position:absolute;top:10px;right:12px;background:none;border:0;color:inherit;font-size:26px;cursor:pointer;line-height:1}
.gm-box label{display:block;font-size:13px;margin:0 0 12px;color:#9ba0a8}
.gm-box input{display:block;width:100%;margin-top:5px;padding:10px 12px;border-radius:9px;border:1px solid #2a2f38;background:#1b1f26;color:#ece9e2;font-size:15px}
.gm-pay{font-size:13px;line-height:1.6;color:#c9ccd2;margin:0 0 14px}
.gm-methods{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.gm-m{flex:1;min-width:140px;padding:10px;border-radius:9px;border:1px solid #2a2f38;background:#1b1f26;color:inherit;cursor:pointer;font-size:14px}
.gm-m.on{border-color:#4285f4;background:rgba(66,133,244,.18)}
.gm-msg{min-height:18px;font-size:13px;margin-bottom:10px;color:#9ba0a8}
.gm-msg.bad{color:#ff6b6b}
.gm-ok{font-size:16px;font-weight:600}

.gm-meta{font-size:12.5px;color:#9ba0a8;margin:10px 0}
.gm-box .btn{width:100%}
.co-sub .prod-badge--gemini { background: linear-gradient(145deg,#4285f4,#9b72f2 60%,#d96570); color: #fff; }