/* Visual blocks for blog guides (quick answer, flow, format cards, size chart, diagrams, FAQ). Uses site tokens from style.css. */
.g-answer{margin:0 0 40px;border-radius:14px;background:linear-gradient(135deg,#101d32,#16294a);color:#dbe6f5;padding:26px 28px 24px;position:relative;overflow:hidden;box-shadow:0 18px 40px #0b14241f}
.g-answer:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:26px solid #2784ff14;right:-80px;top:-90px}
.g-answer .g-label{display:inline-flex;align-items:center;gap:8px;font:800 11.5px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ffb27d;margin-bottom:12px}
.g-answer .g-label:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #ff8a3d33}
.g-answer>p{margin:0 0 18px;font-size:17px;line-height:1.6;color:#e9f0fa;position:relative}
.g-answer>p strong{color:#fff}
.g-answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative}
.g-answer-grid>div{background:#ffffff0d;border:1px solid #ffffff1c;border-radius:10px;padding:16px 18px}
.g-answer-grid h3{font:800 14px/1.3 Manrope,sans-serif;color:#fff;margin:0 0 6px;letter-spacing:0}
.g-answer-grid p{margin:0;font-size:14.5px;line-height:1.55;color:#c3d1e5}
.g-answer-grid .g-chips{margin-top:10px}
.g-chips{display:flex;flex-wrap:wrap;gap:6px}
.g-chip{display:inline-block;font:800 12px/1 Manrope,sans-serif;letter-spacing:.04em;padding:6px 9px;border-radius:6px;background:#e8f2ff;color:#1263cc}
.g-answer .g-chip{background:#2784ff2e;color:#cfe3ff}
.g-answer .g-chip.o{background:#ff8a3d2e;color:#ffd2b3}
.g-chip.o{background:#fff1e7;color:#c45a12}

/* step flow */
.g-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:26px 0 30px;counter-reset:gf}
.g-step{position:relative;text-align:center;padding:0 8px}
.g-step .g-ico{width:62px;height:62px;margin:0 auto 12px;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 8px 20px #0a25400d;position:relative;z-index:1}
.g-step .g-ico svg{width:30px;height:30px}
.g-step:not(:last-child):after{content:"";position:absolute;top:31px;left:calc(50% + 38px);right:calc(-50% + 38px);border-top:2px dashed #b9d6ff}
.g-step b{display:block;font:800 14.5px/1.3 Manrope,sans-serif;color:var(--ink)}
.g-step span{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:4px}
.g-step.hl .g-ico{background:var(--blue);border-color:var(--blue);box-shadow:0 10px 24px #2784ff44}

/* format cards with a quality meter */
.g-formats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 26px}
.g-fcard{border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;background:#fff;position:relative;transition:.2s}
.g-fcard:hover{border-color:#94c4ff;box-shadow:0 14px 30px #0a254012;transform:translateY(-2px)}
.g-fcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.g-fcard h3{margin:0!important;font-size:17px!important}
.g-badge{font:800 11px/1 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:99px;white-space:nowrap}
.g-badge.best{background:#e3f7ec;color:#16794a}.g-badge.good{background:#e8f2ff;color:#1263cc}.g-badge.ok{background:#fff4e5;color:#b45f06}.g-badge.no{background:#fdecec;color:#b42318}
.g-meter{display:flex;gap:4px;margin:2px 0 10px}.g-meter i{flex:1;height:6px;border-radius:9px;background:#e6edf5}
.g-meter.m4 i{background:#22a565}.g-meter.m3 i:nth-child(-n+3){background:var(--blue)}.g-meter.m2 i:nth-child(-n+2){background:var(--orange)}.g-meter.m1 i:first-child{background:#e5484d}
.g-fcard p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.g-fcard .g-chips{margin-bottom:10px}

/* nicer table */
.article-body .g-table table{width:100%;border-collapse:separate;border-spacing:0}
.g-table{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:22px 0 26px;overflow-x:auto}
.g-table table{min-width:520px;font-size:15px}
.g-table thead th{background:var(--navy);color:#fff;font:800 12.5px/1.3 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:13px 16px}
.g-table td,.g-table tbody th{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top;line-height:1.5;text-align:left}
.g-table tbody tr:nth-child(even){background:#f7f9fc}
.g-table tbody th{font-weight:700;color:var(--ink)}
.g-table .g-size{font:800 16px/1 Manrope,sans-serif;color:var(--blue);white-space:nowrap}

/* tip / callout */
.g-tip{display:flex;gap:14px;align-items:flex-start;background:#fff8f2;border:1px solid #ffd9bf;border-radius:12px;padding:16px 18px;margin:24px 0 28px;font-size:15.5px;line-height:1.6}
.g-tip .g-tip-ico{flex:none;width:32px;height:32px;border-radius:9px;background:var(--orange);color:#fff;display:grid;place-items:center;font:800 16px/1 Manrope,sans-serif}
.g-tip p{margin:0}
.g-tip.blue{background:#f1f7ff;border-color:#cfe3ff}.g-tip.blue .g-tip-ico{background:var(--blue)}

/* illustrated diagrams */
.g-diagram{margin:30px 0;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#f7fbff,#fff);padding:22px 20px 14px;position:relative}
.g-diagram svg{display:block;width:100%;height:auto}
.g-diagram figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}
.g-diagram .g-tag{position:absolute;top:12px;left:12px;font:800 10.5px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 9px}

/* size scale bars */
.g-scale{margin:22px 0 28px;border:1px solid var(--line);border-radius:14px;padding:20px 20px 12px;background:#fff}
.g-scale-row{display:grid;grid-template-columns:150px 1fr 70px;gap:14px;align-items:center;padding:9px 0}
.g-scale-row+.g-scale-row{border-top:1px dashed var(--line)}
.g-scale-row .g-name{font:700 14.5px/1.3 Manrope,sans-serif;color:var(--ink)}
.g-scale-row .g-name small{display:block;font:500 12.5px/1.3 'DM Sans',sans-serif;color:var(--muted);margin-top:2px}
.g-track{position:relative;height:14px;background:#eef3f9;border-radius:99px}
.g-bar{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#2784ff,#5aa2ff)}
.g-bar.hl{background:linear-gradient(90deg,#ff8a3d,#ffad73)}
.g-scale-row .g-val{font:800 15px/1 Manrope,sans-serif;color:var(--blue);text-align:right;white-space:nowrap}
.g-scale-axis{display:grid;grid-template-columns:150px 1fr 70px;gap:14px;margin-top:6px}
.g-scale-axis div{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);font-weight:700}

/* two-column compare */
.g-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 28px}
.g-vs>div{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#fff}
.g-vs>div.hl{border:2px solid var(--blue);box-shadow:0 14px 30px #2784ff1a}
.g-vs h3{margin:0 0 10px!important;font-size:17px!important;display:flex;align-items:center;gap:8px}
.g-vs ul{margin:0!important;padding:0!important;list-style:none}
.g-vs li{position:relative;padding-left:24px!important;font-size:14.5px;line-height:1.5;margin-bottom:8px!important}
.g-vs li:before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:#e8f2ff;box-shadow:inset 0 0 0 4px #e8f2ff,inset 0 0 0 14px var(--blue)}
.g-vs>div:not(.hl) li:before{box-shadow:inset 0 0 0 4px #eef1f5,inset 0 0 0 14px #9aa7ba}

/* article FAQ */
.g-faq{margin:18px 0 10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.g-faq details+details{border-top:1px solid var(--line)}
.g-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 20px;font:700 16px/1.4 Manrope,sans-serif;color:var(--ink)}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary:after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:#e8f2ff;color:var(--blue);display:grid;place-items:center;font-size:17px;font-weight:700;transition:transform .2s}
.g-faq details[open] summary:after{transform:rotate(45deg)}
.g-faq details[open] summary{color:var(--blue)}
.g-faq details p{margin:0;padding:0 20px 18px;font-size:15.5px;line-height:1.65}
.g-faq summary:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

/* "updated" pill in the hero meta */
.g-updated{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#9fe2bf;background:#22a5651f;border:1px solid #22a56540;padding:3px 9px;border-radius:99px}

@media(max-width:700px){
  .g-answer{padding:22px 18px 18px}
  .g-answer-grid,.g-formats,.g-vs{grid-template-columns:1fr}
  .g-flow{grid-template-columns:1fr 1fr;row-gap:22px}
  .g-step:nth-child(2):after{display:none}
  .g-scale-row,.g-scale-axis{grid-template-columns:96px 1fr 54px;gap:10px}
  .g-scale-row .g-name{font-size:13px}
  .g-scale{padding:16px 14px 10px}
  .g-diagram{padding:34px 10px 10px}
}
@media(prefers-reduced-motion:reduce){.g-fcard,.g-faq summary:after{transition:none}}
.g-table tbody tr:nth-child(even) th,.g-table tbody tr:nth-child(even) td{background:#f7f9fc}.g-table tbody tr:nth-child(odd) th,.g-table tbody tr:nth-child(odd) td{background:#fff}
@media(max-width:700px){.g-table table{min-width:0;font-size:14px}.g-table td,.g-table tbody th{padding:11px 10px}.g-table thead th{padding:11px 10px;font-size:11px}.g-table .g-size{font-size:14.5px;white-space:normal}}

/* price tiles */
.g-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;margin-top:4px}
.g-price{background:#ffffff0d;border:1px solid #ffffff1c;border-radius:10px;padding:14px 16px}
.g-price small{display:block;font:700 12px/1.3 'DM Sans',sans-serif;color:#9fb4d3;text-transform:uppercase;letter-spacing:.06em}
.g-price b{display:block;font:800 26px/1.1 Manrope,sans-serif;color:#fff;margin:6px 0 4px;letter-spacing:-.02em}
.g-price span{font-size:13px;color:#c3d1e5;line-height:1.4;display:block}
.g-price.hl{background:#2784ff;border-color:#2784ff}.g-price.hl small,.g-price.hl span{color:#e3efff}

/* icon card grid */
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 28px}
.g-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;transition:.2s}
.g-card:hover{border-color:#94c4ff;box-shadow:0 12px 26px #0a254012;transform:translateY(-2px)}
.g-card .g-num{width:34px;height:34px;border-radius:10px;background:#e8f2ff;color:var(--blue);display:grid;place-items:center;font:800 15px/1 Manrope,sans-serif;margin-bottom:10px}
.g-card.o .g-num{background:#fff1e7;color:#c45a12}
.g-card b{display:block;font:800 15.5px/1.3 Manrope,sans-serif;color:var(--ink);margin-bottom:4px}
.g-card span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}

/* numbered vertical steps */
.g-steps{list-style:none!important;padding:0!important;margin:22px 0 28px!important;position:relative}
.g-steps:before{content:"";position:absolute;left:19px;top:20px;bottom:20px;border-left:2px dashed #b9d6ff}
.g-steps li{position:relative;padding:0 0 18px 58px!important;margin:0!important}
.g-steps li:last-child{padding-bottom:0!important}
.g-steps li .g-n{position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 16px/1 Manrope,sans-serif;box-shadow:0 8px 18px #2784ff40}
.g-steps li b{display:block;font:800 16px/1.35 Manrope,sans-serif;color:var(--ink)}
.g-steps li span{display:block;font-size:15px;line-height:1.55;color:var(--muted)}
.g-steps li a{font-weight:700}

/* checklist card */
.g-check{border:1px solid #cfe3ff;background:#f6faff;border-radius:12px;padding:18px 20px;margin:22px 0 26px}
.g-check h3{margin:0 0 10px!important;font-size:16px!important}
.g-check ul{list-style:none!important;padding:0!important;margin:0!important;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.g-check li{position:relative;padding-left:28px!important;margin:0!important;font-size:15px;line-height:1.5}
.g-check li:before{content:"\2713";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:#22a565;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}

/* copy box */
.g-copy{background:#0b1424;color:#d6e2f2;border-radius:12px;padding:18px 20px;margin:20px 0 24px;font:500 14.5px/1.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;position:relative;overflow-x:auto}
.g-copy b{color:#7eb8ff;font-weight:700}
.g-copy .g-copy-btn{position:absolute;top:12px;right:12px;font:700 12px/1 'DM Sans',sans-serif;background:#2784ff;color:#fff;border:0;border-radius:7px;padding:8px 11px;cursor:pointer}

@media(max-width:700px){
  .g-prices{grid-template-columns:1fr}
  .g-grid{grid-template-columns:1fr 1fr}
  .g-check ul{grid-template-columns:1fr}
}

.g-grid.g-two{grid-template-columns:repeat(2,1fr)}

@media(max-width:480px){.g-table td,.g-table tbody th,.g-table thead th{padding:10px 8px}.g-table thead th{letter-spacing:.02em;font-size:10.5px;overflow-wrap:anywhere}.g-table table{font-size:13.5px}.g-card{padding:13px}.g-card span{font-size:13px}}