/* Gram overview: shared calculations, distinct metal accents and readable rows. */
.gram-intro { display:grid; grid-template-columns:1.25fr 1fr; align-items:end; gap:32px; padding-bottom:36px; }
.gram-intro .eyebrow { margin-bottom:18px; }
.gram-intro h1 { font-size:clamp(2.8rem,4.8vw,4.5rem); }
.gram-intro .lead { margin:0; max-width:490px; font-size:1rem; }
.gram-course-bar { border-block:1px solid var(--line); padding-block:18px; }
.gram-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.gram-toolbar > p { display:flex; align-items:center; gap:14px; font-size:.87rem; }
.gram-unit { display:grid; place-items:center; flex-shrink:0; width:46px; height:46px; border-radius:50%; border:1px solid var(--control); color:var(--wine); font-size:1rem; font-weight:600; }
.gram-course-bar .source { margin-top:10px; }
.gram-currency { margin-block:20px; }
.gram-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; align-items:stretch; }
.gram-card { --metal-accent:#855912; --metal-wash:#b3842820; --metal-disc:#e7c77f; display:flex; flex-direction:column; min-width:0; padding:28px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:radial-gradient(ellipse at 100% 0,var(--metal-wash),transparent 60%),var(--surface); }
.gram-metal-silver { --metal-accent:#536479; --metal-wash:#617b9d1a; --metal-disc:#c0cbd7; }
.gram-metal-platinum { --metal-accent:#496659; --metal-wash:#507e6b1c; --metal-disc:#becfc2; }
.gram-metal-palladium { --metal-accent:#6c587b; --metal-wash:#7c5e951c; --metal-disc:#cec1db; }
:root[data-theme=dark] .gram-card { --metal-accent:#edcc8e; --metal-wash:#c3974b16; }
:root[data-theme=dark] .gram-metal-silver { --metal-accent:#c4d0e1; --metal-wash:#9db6db12; }
:root[data-theme=dark] .gram-metal-platinum { --metal-accent:#bad6c7; --metal-wash:#8dc8ae12; }
:root[data-theme=dark] .gram-metal-palladium { --metal-accent:#d8c3eb; --metal-wash:#bd95dc12; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme]) .gram-card { --metal-accent:#edcc8e; --metal-wash:#c3974b16; }
  :root:not([data-theme]) .gram-metal-silver { --metal-accent:#c4d0e1; --metal-wash:#9db6db12; }
  :root:not([data-theme]) .gram-metal-platinum { --metal-accent:#bad6c7; --metal-wash:#8dc8ae12; }
  :root:not([data-theme]) .gram-metal-palladium { --metal-accent:#d8c3eb; --metal-wash:#bd95dc12; }
}
.gram-card-heading { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.gram-symbol { display:grid; place-items:center; flex-shrink:0; width:64px; height:64px; border-radius:50%; color:#3b3439; background:linear-gradient(135deg,#ffffffc7,var(--metal-disc) 52%,#00000018),var(--metal-disc); border:1px solid #ffffff50; box-shadow:inset 0 0 0 5px #ffffff1f,inset 0 0 0 6px #3b343919; font:1.6rem Georgia,serif; }
.gram-card h2 { font-size:1.9rem; }
.gram-card table { width:100%; border-collapse:separate; border-spacing:0 4px; font-variant-numeric:tabular-nums; }
.gram-card th { text-align:left; font-weight:550; }
.gram-card thead th { color:var(--muted); font-size:.72rem; font-weight:450; padding:0 10px 7px; }
.gram-card tbody th,.gram-card td { padding:5px 10px; border:0; }
.gram-card tbody tr:nth-child(odd) { background:var(--metal-wash); }
.gram-card tbody th { border-radius:8px 0 0 8px; }
.gram-card td:nth-child(2) { text-align:right; font-weight:550; }
.gram-card thead th:nth-child(2) { text-align:right; }
.gram-permille { color:var(--muted); font-size:.8em; font-weight:400; }
.gram-card td:last-child { width:54px; padding-left:0; padding-right:6px; border-radius:0 8px 8px 0; text-align:right; }
.gram-card a { display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:44px; border-radius:50%; color:var(--metal-accent); }
.gram-card a .icon { width:19px; height:19px; }
.gram-card a:hover { background:var(--wash); }
.gram-card tbody tr:focus-within { outline:1px solid var(--metal-accent); outline-offset:1px; }
.gram-card-foot { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:18px; color:var(--muted); font-size:.72rem; }
.gram-card-foot .icon { width:16px; height:16px; }
.gram-explanation { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:center; padding-block:60px 72px; }
.gram-example { padding:30px; border-radius:24px; background:var(--wash); text-align:center; }
.gram-example .eyebrow { margin-bottom:20px; }
.gram-equation { font-size:1.15rem; color:var(--muted); }
.gram-example > strong { display:block; color:var(--wine); font-size:clamp(3.5rem,6vw,5rem); font-weight:450; letter-spacing:-.06em; line-height:1.3; margin-block:8px; }
.gram-example > strong span { font-size:.5em; }
.gram-example > p:last-child { font-size:.85rem; color:var(--muted); }
.gram-explanation-copy h2 { font-size:clamp(1.8rem,3vw,2.7rem); }
.gram-explanation-copy p { margin-top:18px; color:var(--muted); font-size:.92rem; }
.gram-explanation-copy .text-link { margin-top:16px; }
@media(max-width:1000px) { .gram-intro { grid-template-columns:1fr; gap:20px; } .gram-intro .lead { max-width:650px; } }
@media(max-width:760px) {
  .gram-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .gram-card { padding:24px; }
  .gram-currency-label { display:block; }
  .gram-explanation { grid-template-columns:minmax(0,1fr); padding-block:36px 48px; gap:28px; }
  .gram-example { padding:26px; }
}
@media(max-width:380px) {
  .gram-card { padding:20px 14px; }
  .gram-card table { font-size:.88rem; }
  .gram-card tbody th,.gram-card td { padding-inline:7px; }
  .gram-card td:last-child { width:44px; padding-right:0; }
  .gram-symbol { width:54px; height:54px; }
  .gram-card-foot { font-size:.68rem; }
}

@media(forced-colors:active) { .gram-symbol { border:1px solid; } }

/* Continue from the gram overview into the existing knowledge and quiz pages. */
.gram-discover { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding-bottom:64px; }
.gram-discover-card { display:flex; flex-direction:column; min-width:0; padding:30px; border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.gram-discover-quiz { background:linear-gradient(145deg,var(--surface),var(--wash)); }
.gram-discover-label { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.gram-discover-label .eyebrow { margin:0; }
.gram-discover-mark { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; border:1px solid var(--control); border-radius:50%; color:var(--wine); font:1.6rem Georgia,serif; }
.gram-discover-card h2 { font-size:clamp(1.7rem,2.7vw,2.3rem); }
.gram-discover-card > p { margin-block:18px 20px; color:var(--muted); font-size:.95rem; }
.gram-discover-card > a { align-self:flex-start; margin-top:auto; }
@media(max-width:760px) {
  .gram-discover { grid-template-columns:minmax(0,1fr); gap:20px; padding-bottom:40px; }
  .gram-discover-card { padding:24px; }
}