/* The offer — one panel.

   The head (chip, headline), the glow frame, the tick chip, the button and the exclusions note are
   fora's measured values, unchanged: docs/research/components/pricing.spec.md. What sat inside the
   frame is not, because three plan cards became one package panel. Its parts (header, three feature
   groups, free-concept strip) are laid out to the same 36px padding and 14/21 body the cards used,
   so the panel still reads as part of the same page.

   Two rules of the old card grid are deliberately gone:
   - Row hairlines under each check. Three columns of different lengths put them at different
     heights, which read as noise; the column dividers and the ticks carry the structure instead.
   - The raised middle card, its backdrop-filter and its glow layer. Nothing is a tier any more. */

.gf-pricing{
  position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:0;
  /* Full bleed. This cap put the whole SECTION in a 1600px box, so on any screen wider than that
     its ground stopped 1600px across and the page went black down both sides. The content keeps
     its own 1080 column inside, so only the ground moves. */
  width:100%;
  margin-inline:auto;
  padding:0 24px;
}
.gf-pricing-defs{position:absolute;width:0;height:0;overflow:hidden}

/* content column: 1080 / 720 / 720, padding 160-0-80 / 120-0 / 80-0, gap 64 / 48 / 36 */
.gf-pricing-col{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:64px;
  width:100%;max-width:1080px;
  padding:160px 0 80px;
}

/* ---------- head ---------- */
.gf-pricing-head{
  display:flex;flex-direction:row;justify-content:center;align-items:flex-end;
  gap:36px;width:100%;
}
.gf-pricing-headinner{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:24px;width:100%;
}
.gf-pricing-chipwrap{display:flex}
.gf-pricing-chip{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  gap:12px;
  height:30px;padding:4px 16px;
  border-radius:393px;
  background:var(--ink-10);
  overflow:hidden;
}
.gf-pricing-chip::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--ink-10);border-radius:inherit;
  pointer-events:none;
}
.gf-pricing-dot{
  width:7px;height:7px;border-radius:215px;
  background:var(--ink);
  opacity:.17;
  animation:gf-pricing-pulse 4s cubic-bezier(.44,0,.56,1) infinite;
}
@keyframes gf-pricing-pulse{0%,100%{opacity:.08}50%{opacity:.75}}
.gf-pricing-chip-t{
  font-size:14px;line-height:21px;letter-spacing:-.28px;font-weight:400;
  color:var(--ink-80);text-align:center;
}
.gf-pricing-h2wrap{display:flex;flex-direction:column;width:100%}
.gf-pricing-h2{
  font-family:var(--font);
  font-size:40px;line-height:54px;letter-spacing:-1.6px;font-weight:500;
  color:var(--white);text-align:start;text-wrap:balance;
}

/* ---------- the frame ----------
   One content child now, so the frame is a plain block; the glow layers are absolute behind it. */
.gf-pricing-framewrap{width:100%}
.gf-pricing-frame{position:relative;display:block;width:100%}

/* Framer glow-border: a wrapper painted in the border colour, a mouse-tracked radial light,
   and an inset-1px fill. The wrapper's own background IS the 1px border. */
.gf-pricing-glow{
  position:absolute;z-index:0;
  border-radius:var(--gf-glow-r);
  background:var(--gf-glow-border);
  overflow:hidden;
  pointer-events:none;
}
.gf-pricing-glow-light{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  will-change:opacity,background;
  background:radial-gradient(735px at 0px 0px, rgba(255,255,255,.25), transparent);
}
.gf-pricing-glow-fill{
  position:absolute;inset:1px;
  border-radius:calc(var(--gf-glow-r) - 1px);
  background:var(--gf-glow-fill);
  pointer-events:none;
}
.gf-pricing-glow--outer{--gf-glow-r:24px;--gf-glow-border:#000;--gf-glow-fill:var(--panel-3);inset:-8px}
.gf-pricing-glow--inner{--gf-glow-r:16px;--gf-glow-border:var(--ink-10);--gf-glow-fill:var(--panel);inset:0}

/* ---------- the panel ----------
   --offer-pad is the panel's own padding, --offer-gpad each feature group's. They part company
   between 810 and 1023.98, where the column is a fixed 720 and three groups have to share it. */
.gf-offer{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:100%;
  --offer-pad:36px;
  --offer-gpad:36px;
}

/* header: the offer on the start side, the commercial terms on the end side */
.gf-offer-head{
  display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;
  gap:48px;
  padding:var(--offer-pad);
  border-bottom:1px solid var(--ink-10);
}
.gf-offer-lead{flex:1 1 auto;min-width:0;max-width:600px}
.gf-offer-title{
  font-family:var(--font-display);
  font-size:36px;line-height:1.35em;letter-spacing:-.02em;font-weight:400;
  color:var(--ink);text-wrap:balance;
}
.gf-offer-desc{
  margin-top:12px;
  font-size:14px;line-height:21px;letter-spacing:-.28px;font-weight:400;
  color:var(--ink-80);
}
/* Not a price. The quote label is a plain 16px line, so the panel's own title stays the
   dominant one and "Custom quote" cannot be read as a tier. */
.gf-offer-terms{flex:0 0 auto;max-width:300px;text-align:end}
.gf-offer-quote{
  font-size:16px;line-height:24px;letter-spacing:-.32px;font-weight:500;
  color:var(--ink);
}
.gf-offer-quote-sub,.gf-offer-delivery{
  font-size:13px;line-height:19.5px;letter-spacing:-.26px;font-weight:400;
  color:var(--ink-65);
}
.gf-offer-quote-sub{margin-top:4px}
.gf-offer-delivery{margin-top:12px}

/* ---------- feature groups ----------
   Three equal columns of one package, separated by a hairline, tops aligned by the grid. */
.gf-offer-groups{
  /* stretch, not start: the divider is each group's inline-start border, so stretching makes
     the three lines the same height instead of stopping where each list happens to end. The
     headings and top edges still align, because each group's content flows from its top. */
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  width:100%;
}
.gf-offer-group{
  min-width:0;
  padding:var(--offer-gpad);
}
.gf-offer-group+.gf-offer-group{border-inline-start:1px solid var(--ink-10)}
.gf-offer-group-h{
  margin-bottom:20px;
  font-size:12px;line-height:18px;letter-spacing:-.24px;font-weight:500;
  color:var(--ink-65);
}

/* ---------- check rows ---------- */
.gf-pricing-checks{
  display:flex;flex-direction:column;align-items:stretch;
  gap:14px;width:100%;padding:0;
}
.gf-pricing-check{
  display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;
  gap:12px;width:100%;padding:0;
}
/* 21px tick against a 21px first line: flex-start lands it on the line, not the block's centre */
.gf-pricing-tick{
  flex:0 0 21px;
  display:flex;justify-content:center;align-items:center;
  width:21px;height:21px;
  border-radius:880px;
  background:var(--ink-25);
  color:var(--ink);
  overflow:clip;
}
.gf-pricing-tick svg{width:14px;height:14px;display:block}
.gf-pricing-check-t{
  font-size:14px;line-height:21px;letter-spacing:-.28px;font-weight:500;
  color:var(--ink-80);text-align:start;
}

/* ---------- the free-concept strip ----------
   Full width across the foot of the panel. The 1px margins keep the frame's own border ring
   visible underneath it; the radii match the inner glow fill, which is inset 1px at 15px. */
.gf-offer-strip{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  gap:40px;
  margin:0 1px 1px;
  padding:var(--offer-pad);
  border-top:1px solid var(--ink-10);
  background:var(--panel-2);
  border-end-start-radius:15px;border-end-end-radius:15px;
}
.gf-offer-strip-copy{flex:1 1 auto;min-width:0;max-width:680px}
.gf-offer-strip-h{
  font-size:18px;line-height:27px;letter-spacing:-.36px;font-weight:500;
  color:var(--ink);
}
.gf-offer-strip-p{
  margin-top:8px;
  font-size:14px;line-height:21px;letter-spacing:-.28px;font-weight:400;
  color:var(--ink-80);
}
.gf-offer-strip-cta{flex:0 0 auto;display:flex}

/* ---------- buttons ---------- */
.gf-pricing-btn{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  height:36px;padding:0 24px;
  border-radius:768px;
  background:var(--ink-10);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  color:var(--ink);
  font-size:14px;line-height:21px;letter-spacing:-.28px;font-weight:400;
  white-space:nowrap;
  overflow:clip;
  cursor:pointer;
  transition:background-color 250ms cubic-bezier(.2,.85,.3,1);
  transition:background-color 250ms linear(0,.333 20.8%,.733 41.2%,.953 61.6%,1.033 82.4%,1);
}
.gf-pricing-btn::after{
  content:"";position:absolute;inset:0;
  border:1px solid var(--ink-10);border-radius:inherit;
  pointer-events:none;
}
.gf-pricing-btn--primary{
  background:rgba(255,255,255,.8);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#000;
}
.gf-pricing-btn--primary::after{border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .gf-pricing-btn:hover{background:var(--ink-25)}
  .gf-pricing-btn--primary:hover{background:var(--ink)}
}

/* ---------- the exclusions note ---------- */
.gf-pricing-note{
  width:100%;max-width:720px;
  font-size:13px;line-height:19.5px;letter-spacing:-.26px;font-weight:400;
  color:var(--ink-65);text-align:start;
}

/* ---------- 810 to 1023.98: three columns inside the fixed 720 column ----------
   The panel keeps its 28px, the groups drop to 20px: at 720 each column is 239px wide and the
   36px version left only 134px for the text, which broke four-word lines into three. */
@media (max-width:1023.98px){
  .gf-pricing-col{gap:48px;max-width:720px;padding:120px 0}
  .gf-pricing-h2{font-size:36px;line-height:48.6px;letter-spacing:-1.44px}
}
@media (min-width:810px) and (max-width:1023.98px){
  .gf-offer{--offer-pad:28px;--offer-gpad:20px}
  .gf-offer-title{font-size:32px}
  .gf-offer-head{gap:28px}
  .gf-offer-terms{max-width:265px}   /* 230 broke "before we build." onto its own line */
  .gf-offer-strip{gap:28px}
}

/* ---------- <= 809.98: one column, the frame becomes the panel, no glow ---------- */
@media (max-width:809.98px){
  .gf-pricing-col{gap:36px;max-width:720px;padding:80px 0}
  .gf-pricing-head{flex-direction:column;align-items:flex-start;gap:16px}
  .gf-pricing-headinner{flex:0 0 auto}
  .gf-pricing-h2{font-size:32px;line-height:43.2px;letter-spacing:-1.28px}

  .gf-pricing-frame{
    border-radius:16px;
    background:var(--panel);
  }
  .gf-pricing-frame::after{
    content:"";position:absolute;inset:0;
    border:1px solid var(--ink-10);border-radius:inherit;
    pointer-events:none;
  }
  .gf-pricing-glow{display:none}

  .gf-offer{--offer-pad:24px;--offer-gpad:24px}
  .gf-offer-head{flex-direction:column;align-items:flex-start;gap:20px}
  .gf-offer-title{font-size:28px}
  .gf-offer-lead,.gf-offer-terms{max-width:none;width:100%}
  .gf-offer-terms{text-align:start}

  /* stacked groups, the column hairline becomes a horizontal one */
  .gf-offer-groups{grid-template-columns:1fr}
  .gf-offer-group+.gf-offer-group{border-inline-start:0;border-top:1px solid var(--ink-10)}

  .gf-offer-strip{flex-direction:column;align-items:flex-start;gap:20px}
  .gf-offer-strip-cta{width:100%}
  .gf-offer-strip .gf-pricing-btn{width:100%;height:44px;white-space:normal;text-align:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .gf-pricing-dot{animation:none;opacity:.5}
  .gf-pricing-btn{transition:none}
  .gf-pricing-glow-light{display:none}
}