/* Nuqud design system. Colours and fonts are set in :root below. */
/* Colours: --gold is the light yellow used across the site; --butter is the deeper yellow kept for Wills. */
:root { --ink: #14213D; --ink2: #22325A; --gold: #FFE08A; --sky: #9CC9FF; --coral: #FFA37E; --rose: #F6A6BF; --lilac: #BDB2FF; --butter: #FFC82E; --muted: #5A6479; --line: #E6E4DD; --soft: #F6F4EE; --cream: #F3EEE3; --ease: cubic-bezier(.22,1,.36,1); --spring: cubic-bezier(.34,1.56,.64,1); --a: var(--gold); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 16.500px/1.5 "Schibsted Grotesk", system-ui, sans-serif; color: var(--ink); background: #fff; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: Newsreader, Georgia, serif; font-weight: 400; letter-spacing: -.022em; }
.wrap { width: min(100% - 32px, 1240px); margin-inline: auto; }
.arrow { display: inline-block; transition: transform .25s var(--ease); }
a:hover .arrow { transform: translateX(4px); }
svg.g { display: block; width: 100%; height: auto; overflow: visible; }

/* marker on headings and key phrases */
.hl { position: relative; display: inline-block; z-index: 0; }
.hl::before { content: ""; position: absolute; z-index: -1; inset: .08em -.09em .02em; border-radius: .14em; background: var(--c, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) var(--d, .1s); }
.seen .hl::before { transform: scaleX(1); }

/* top bar */
.bar { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid transparent; }
.bar.lifted { border-color: var(--line); }
.top { display: flex; align-items: center; gap: 6px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 500 28px Newsreader, serif; letter-spacing: -.02em; margin-right: auto; }
.logo svg { width: 28px; height: 28px; overflow: visible; }
.logo .dot { animation: drop 1s var(--ease) both .2s; }
@keyframes drop { from { transform: translateY(-16px); opacity: 0; } 60% { opacity: 1; } }
.top .item { background: none; border: 0; padding: 8px 12px; border-radius: 99px; font-size: 15.500px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: background .2s; }
.top .item:hover, .top .item[aria-expanded="true"] { background: var(--soft); }
.chev { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.top .item[aria-expanded="true"] .chev { transform: rotate(180deg); }
.start { margin-left: 10px; background: var(--gold); padding: 9px 18px; border-radius: 99px; font-weight: 600; font-size: 15px; transition: transform .2s var(--ease); }
.start:hover { transform: translateY(-2px); }
.search { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.search:hover { background: var(--soft); }
.burger { display: none; background: var(--soft); border: 0; border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 15px; cursor: pointer; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 26px 40px -24px rgba(20,33,61,.3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .28s var(--ease), visibility .2s; }
.mega.open { opacity: 1; visibility: visible; transform: none; }
.mega .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 44px; padding: 24px 0 28px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; }
.mega li a { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-weight: 500; }
.mega li svg { width: 24px; flex: none; transition: transform .3s var(--spring); }
.mega li a:hover svg { transform: translateY(-2px) rotate(-5deg); }
.feature { position: relative; display: block; overflow: hidden; min-height: 164px; border-radius: 16px; padding: 18px; background: var(--c); --a: #fff; }
.feature b { position: relative; display: block; font: 400 24px/1.12 Newsreader, serif; letter-spacing: -.015em; max-width: 9em; }
.feature svg { position: absolute; right: -14px; bottom: -22px; width: 118px; transition: transform .45s var(--spring); }
.feature:hover svg { transform: translateY(-5px) rotate(-3deg); }

/* landing */
.hero { background: var(--ink); color: #fff; border-radius: 26px; padding: 12px 12px 0; overflow: hidden; }
.hero__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 12px; }
.copy { padding: clamp(18px, 2.800vw, 36px) clamp(14px, 2.800vw, 36px); display: grid; gap: 18px; align-content: center; }
h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.06; letter-spacing: -.032em; }
h1 .line { display: block; white-space: nowrap; }
.flip { position: relative; display: inline-grid; justify-items: start; overflow: hidden; vertical-align: -.2em; height: 1.12em; margin-block: -.05em; padding: 0 .13em; color: var(--ink); font-style: italic; z-index: 0; border-radius: .15em; transition: width .5s var(--ease); }
.flip::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--c); transition: background .4s; }
.flip span { grid-area: 1 / 1; line-height: 1.12; white-space: nowrap; transition: transform .6s var(--ease), opacity .35s; }
.flip span.below { transform: translateY(105%); opacity: 0; }
.flip span.above { transform: translateY(-105%); opacity: 0; }
.flip span.reset { transition: none; }
.sub { font-size: 17.500px; color: #C9D0DF; max-width: 31em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: 99px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 17px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(255,200,46,.75); }
.btn .labels { position: relative; display: inline-grid; justify-items: start; overflow: hidden; height: 1.5em; }
.btn .labels span { grid-area: 1 / 1; white-space: nowrap; transition: transform .55s var(--ease), opacity .3s; }
.btn .labels span.below { transform: translateY(110%); opacity: 0; }
.btn .labels span.above { transform: translateY(-110%); opacity: 0; }
.btn .labels span.reset { transition: none; }
.link { font-weight: 500; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 4px; }
.link:hover { text-decoration-color: #fff; }

/* the moving panel */
.stagewrap { height: 100%; }
.stage { position: relative; height: 100%; min-height: 310px; border-radius: 17px; overflow: hidden; background: var(--ink2); }
.scene { position: absolute; inset: 0; background: var(--c); color: var(--ink); --a: #fff; transform: translate3d(102%, 0, 0); visibility: hidden; }
.scene.on { transform: none; visibility: visible; transition: transform .85s var(--ease); }
.scene.prev { transform: translate3d(-40%, 0, 0); visibility: visible; transition: transform .85s var(--ease), visibility 0s .85s; }
.scene.on { z-index: 2; }
svg.art { position: absolute; right: 16px; bottom: 0; width: 72%; max-width: 360px; opacity: 0; transform: translate3d(60px, 30px, 0) scale(.84) rotate(6deg); }
.scene.on svg.art { opacity: 1; transform: none; transition: transform .95s var(--spring) .2s, opacity .3s .2s; }
svg.art.full { width: 100%; max-width: none; right: 0; }
.acc { transform-box: fill-box; transform-origin: center; }
.scene.on .a-drop { animation: aDrop .95s var(--ease) .55s both; }
.scene.on .a-door { transform-origin: left center; animation: aDoor 1s var(--ease) .6s both; }
.scene.on .a-rise { transform-origin: bottom; animation: aRise .85s var(--spring) both; animation-delay: calc(.45s + var(--n, 0) * .13s); }
.scene.on .a-sun { animation: aSun 1.3s var(--ease) .45s both; }
.scene.on .a-turn { transform-origin: 0% 100%; animation: aTurn 1s var(--spring) .55s both; }
.scene.on .a-pop { animation: aPop .6s var(--spring) both; animation-delay: calc(.5s + var(--n, 0) * .14s); }
@keyframes aDrop { from { transform: translateY(-62px); opacity: 0; } 25% { opacity: 1; } }
@keyframes aDoor { from { transform: scaleX(.12); } }
@keyframes aRise { from { transform: scaleY(.1); } }
@keyframes aSun { from { transform: translateY(16px); } }
@keyframes aTurn { from { transform: rotate(-70deg); opacity: 0; } }
@keyframes aPop { from { transform: scale(0); } }
.note { position: absolute; left: 18px; top: 18px; width: min(270px, 66%); background: #fff; border-radius: 15px; padding: 14px 16px; font-size: 14px; line-height: 1.32; box-shadow: 0 14px 28px -16px rgba(20,33,61,.5); opacity: 0; transform: translate3d(-26px, 0, 0); z-index: 2; }
.scene.on .note { opacity: 1; transform: none; transition: transform .75s var(--ease) .32s, opacity .3s .32s; }
.note small { display: block; color: var(--muted); font-size: 12.500px; }
.note strong { display: block; font: 400 31px/1.08 Newsreader, serif; letter-spacing: -.02em; margin: 2px 0 4px; font-variant-numeric: lining-nums; }
.mini { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; gap: 8px; align-items: center; height: 29px; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.mini img { height: 17px; max-width: 60px; object-fit: contain; object-position: left; }
.t { display: block; height: 6px; border-radius: 9px; background: #EDEAE1; overflow: hidden; }
.t i { display: block; height: 100%; border-radius: 9px; background: var(--ink); transform: scaleX(.05); transform-origin: left; }
.scene.on .t i { transform: scaleX(var(--w)); transition: transform 1.1s var(--ease) calc(.5s + var(--n, 0) * .1s); }
.yn { display: flex; align-items: center; justify-content: space-between; height: 27px; font-weight: 500; }
.yn b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; color: #fff; background: var(--ink); }
.yn.no { color: var(--muted); }
.yn.no b { background: #C9CDD6; }

/* rail across the bottom */
.rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-inline: -12px; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.rail button { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; height: 60px; background: none; border: 0; color: #fff; --a: var(--gold); cursor: pointer; font-weight: 500; font-size: 15px; opacity: .72; transition: opacity .25s; overflow: hidden; }
.rail button + button { border-left: 1px solid rgba(255,255,255,.1); }
.rail svg { width: 21px; flex: none; transition: transform .4s var(--spring); }
.rail button:hover { opacity: 1; }
.rail button:hover svg { transform: translateY(-2px); }
.rail button[aria-pressed="true"] { opacity: 1; }
.rail button[aria-pressed="true"] svg { transform: scale(1.14); }
.rail button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bar, var(--gold)); transform: scaleX(0); transform-origin: left; }
.rail button[aria-pressed="true"]::after { transform: scaleX(1); }
.playing .rail button[aria-pressed="true"]::after { animation: fill var(--dur, 3800ms) linear both; }
.pz { position: absolute; z-index: 5; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.82); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.pz:hover { background: #fff; }
.pz svg { width: 12px; height: 12px; }
.pz .play { display: none; }
.pz.off .play { display: block; }
.pz.off .pause { display: none; }
@keyframes fill { from { transform: scaleX(0); } }

/* ticker */
.tick { overflow: hidden; margin-top: 10px; padding: 8px 0; font-size: 14.500px; color: var(--muted); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tick div { display: flex; gap: 44px; width: max-content; animation: tick 46s linear infinite; }
.tick:hover div { animation-play-state: paused; }
.tick b { color: var(--ink); font-weight: 600; }
@keyframes tick { to { transform: translateX(-50%); } }

.sec { padding-top: clamp(48px, 6.500vw, 84px); }
.head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
h2 { font-size: clamp(31px, 3.700vw, 46px); line-height: 1.08; }
.xmore { font-weight: 500; white-space: nowrap; }

/* topics: light */
.topics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 10px; list-style: none; margin: 0; padding: 0; }
.topics a { display: grid; justify-items: start; gap: 10px; padding: 14px 8px 14px 0; font-weight: 500; font-size: 15.500px; line-height: 1.25; }
.topics svg { width: 38px; transition: transform .4s var(--spring); }
.topics a:hover svg { transform: translateY(-5px) rotate(-5deg); }
.topics span { background: linear-gradient(var(--gold), var(--gold)) 0 92% / 0 .42em no-repeat; transition: background-size .35s var(--ease); }
.topics a:hover span { background-size: 100% .42em; }

/* five things: just read */
.five { margin-top: clamp(48px, 6.500vw, 84px); background: var(--soft); }
.five .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 70px); padding-block: clamp(40px, 5.500vw, 70px); }
.five .intro { position: sticky; top: 92px; align-self: start; }
.five .intro p { color: var(--muted); margin-top: 12px; max-width: 22em; }
.five ol { list-style: none; margin: 0; padding: 0; }
.five li { padding: 17px 0; border-top: 1px solid #DEDACE; }
.five li:first-child { border-top: 0; padding-top: 0; }
.five h3 { font-size: 24px; line-height: 1.2; }
.five li p { color: #3C4660; margin-top: 4px; max-width: 42em; }
.five li a { font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: #B9B5A8; text-underline-offset: 3px; }

/* blog */
.posts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 24px; }
.post { display: block; grid-column: span 4; }
.post.lead { grid-column: span 6; }
.cat { color: var(--muted); font-size: 14px; font-weight: 500; display: block; margin-top: 13px; }
.post h3 { font-size: 24px; line-height: 1.15; margin-top: 2px; }
.post.lead h3 { font-size: clamp(26px, 2.800vw, 34px); }
.meta { color: var(--muted); font-size: 14px; margin-top: 6px; }
.cover { position: relative; display: block; overflow: hidden; height: 200px; border-radius: 18px; background: var(--c); --a: #fff; isolation: isolate; }
.lead .cover { height: 270px; }
.cover svg { position: absolute; right: -14px; bottom: -28px; width: 170px; transition: transform .5s var(--spring); }
.lead .cover svg { width: 240px; }
.post:hover .cover svg { transform: translateY(-6px) rotate(-3deg); }
.cover b { position: absolute; left: 18px; top: 12px; font: 400 58px/1 Newsreader, serif; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.lead .cover b { font-size: 84px; top: 14px; left: 22px; }
.duo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.08); mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.duo::after { content: ""; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: lighten; pointer-events: none; }
.post:hover .duo img { transform: scale(1.03); }

/* numbers */
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel { border-radius: 22px; padding: clamp(22px, 3vw, 32px); }
.fee { background: var(--ink); color: #fff; }
.panel h3 { font-size: 27px; line-height: 1.12; }
.big { font: 400 clamp(52px, 6vw, 76px)/1 Newsreader, serif; letter-spacing: -.03em; color: var(--gold); margin-top: 14px; font-variant-numeric: lining-nums tabular-nums; }
.fee label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin-top: 16px; font-size: 15px; color: #DDE2EC; }
.fee output { font-weight: 600; color: #fff; }
input[type=range] { grid-column: 1 / -1; width: 100%; height: 26px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.fee small { display: block; margin-top: 12px; color: #AAB4C8; font-size: 13.500px; line-height: 1.4; }
.rates { background: var(--soft); display: grid; align-content: start; gap: 8px; }
.rate { display: grid; grid-template-columns: 108px minmax(0, 1fr) 56px; gap: 12px; align-items: center; height: 54px; border-top: 1px solid #E2DED2; }
.rate:first-of-type { margin-top: 10px; }
.rate img { height: 26px; max-width: 96px; object-fit: contain; object-position: left; }
.rate .t { height: 8px; background: #E7E3D8; }
.rate .t i { transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--n) * 90ms); }
.seen .rate .t i { transform: scaleX(var(--w)); }
.rate b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rates small { color: var(--muted); font-size: 13.500px; }

/* email */
.mail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 24px; overflow: hidden; background: var(--ink); color: #fff; }
.scenee { position: relative; background: var(--cream); min-height: 248px; overflow: hidden; color: var(--ink); }
.noon { position: absolute; left: 50%; bottom: 26px; width: 190px; margin-left: -95px; overflow: visible; }
.noon .dot { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px); } }
svg.fl { position: absolute; width: 44px; animation: fl 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes fl { 50% { transform: translateY(-11px) rotate(var(--r, 5deg)); } }
.mail__copy { padding: clamp(24px, 3.200vw, 40px); display: grid; gap: 10px; align-content: center; }
.mail__copy h2 { font-size: clamp(29px, 3.100vw, 40px); }
.mail__copy p { color: #C9D0DF; max-width: 33em; }
.mail form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mail input { flex: 1 1 220px; height: 50px; padding: 0 20px; border-radius: 99px; border: 1.500px solid rgba(255,255,255,.5); background: transparent; color: #fff; }
.mail input::placeholder { color: #C9D0DF; }
.mail input:focus { outline: 0; border-color: var(--gold); }
.mail form button { height: 50px; padding: 0 26px; border-radius: 99px; border: 0; background: var(--gold); color: var(--ink); font-weight: 600; cursor: pointer; transition: transform .2s var(--ease); }
.mail form button:hover { transform: translateY(-2px); }
.mail small { font-size: 13.500px; color: #AAB4C8; }

.foot { margin-top: clamp(48px, 6.500vw, 84px); background: var(--ink); color: #C9D0DF; padding: 44px 0 28px; font-size: 15px; }
.foot .grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 26px; }
.foot .logo { color: #fff; display: inline-flex; margin-bottom: 8px; }
.foot b { display: block; color: #fff; font-weight: 600; margin-bottom: 8px; }
.foot a:not(.logo) { display: block; padding: 3px 0; }
.foot a:hover { color: #fff; }
.foot small { display: block; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.500px; }

.mobile-sheet { display: none; }
@media (max-width: 900px) {
  .top .item, .search, .start { display: none; }
  .burger { display: block; }
  .mega { display: none; }
  .mobile-sheet.open { display: block; padding: 4px 0 18px; border-top: 1px solid var(--line); }
  .mobile-sheet a { display: block; padding: 10px 0; font-weight: 500; }
  .hero { border-radius: 22px; padding: 8px 8px 0; }
  .hero__top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .copy { padding: 16px 12px 14px; gap: 14px; }
  .sub { font-size: 16px; }
  .btn { height: 50px; padding: 0 20px; font-size: 16px; }
  .stage { min-height: 176px; height: 176px; border-radius: 15px; }
  .note { left: 10px; top: 10px; width: 66%; padding: 10px 12px; font-size: 13px; }
  .note strong { font-size: 25px; }
  .mini { height: 24px; grid-template-columns: 48px minmax(0, 1fr) 36px; }
  .mini img { max-width: 46px; }
  .mini:nth-of-type(n+3) { display: none; }
  svg.art { width: 40%; right: 8px; }
  svg.art.full { width: 100%; right: 0; }
  .rail { margin-inline: -8px; margin-top: 8px; }
  .rail button { flex-direction: column; gap: 4px; height: 62px; font-size: 11.500px; }
  .rail button + button { border-left: 0; }
  .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topics a { font-size: 14.500px; }
  .five .wrap, .nums, .mail { grid-template-columns: minmax(0, 1fr); }
  .five .intro { position: static; }
  .post, .post.lead { grid-column: 1 / -1; }
  .cover, .lead .cover { height: 170px; }
  .lead .cover svg { width: 170px; }
  .lead .cover b { font-size: 58px; }
  .scenee { min-height: 148px; }
  .noon { width: 120px; margin-left: -60px; bottom: 16px; }
  .foot .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .grid > div:first-child { grid-column: 1 / -1; }
  .rate { grid-template-columns: 92px minmax(0, 1fr) 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
}

/* covers: words can never sit behind the icon */
.cover { container-type: inline-size; }
.cover b { z-index: 1; white-space: nowrap; font-size: clamp(30px, 16cqw, 56px); }
.lead .cover b { font-size: clamp(34px, 15cqw, 72px); }
.cover svg { width: 112px; right: -8px; bottom: -24px; }
.lead .cover svg { width: 160px; }
.feature b { z-index: 1; max-width: 8em; }
.feature { min-height: 182px; }
.feature svg { width: 92px; right: -10px; bottom: -18px; }
/* compact article rows */
.rowpost { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; padding: 15px 0; border-top: 1px solid var(--line); }
.rowpost .thumb { position: relative; display: block; overflow: hidden; width: 92px; height: 72px; border-radius: 12px; background: var(--c); --a: #fff; }
.rowpost .thumb svg { position: absolute; left: 50%; top: 50%; width: 42px; margin: -21px 0 0 -21px; transition: transform .4s var(--spring); }
.rowpost:hover .thumb svg { transform: translateY(-3px) rotate(-5deg); }
.rowpost h3 { font-size: 21px; line-height: 1.18; }
.rowpost .cat { margin: 0 0 1px; font-size: 13.500px; }
.rowpost .meta { margin-top: 3px; font-size: 13.500px; }
.rowpost p.dek2 { color: #3C4660; font-size: 15px; line-height: 1.4; margin-top: 3px; }
.rowpost h3 { background: linear-gradient(var(--gold), var(--gold)) 0 92% / 0 .3em no-repeat; display: inline; transition: background-size .35s var(--ease); }
.rowpost:hover h3 { background-size: 100% .3em; }
.homeblog { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 34px; }
.homeblog .post.lead { grid-column: auto; }
.homeblog .lead .cover { height: 250px; }
.homeblog .list .rowpost:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .homeblog { grid-template-columns: minmax(0, 1fr); gap: 22px; } .homeblog .lead .cover { height: 170px; } }
.opt { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #DDE2EC; cursor: pointer; }
.opt input { flex: none; width: 16px; height: 16px; accent-color: var(--gold); }

/* what Nuqud covers: a sentence, not a grid */
.cover2 { padding-top: clamp(26px, 3.800vw, 46px); }
.cov { font: 400 clamp(29px, 3.700vw, 48px)/1.2 Newsreader, Georgia, serif; letter-spacing: -.02em; max-width: 25em; }
.cov a { position: relative; display: inline-block; z-index: 0; }
.cov a::before { content: ""; position: absolute; z-index: -1; inset: .1em -.08em .03em; border-radius: .13em; background: var(--c, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.cov a:hover::before, .cov a.lit::before { transform: scaleX(1); }
.proof { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 40px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.nums2 { display: flex; flex-wrap: wrap; gap: 8px 30px; font-size: 14px; color: var(--muted); line-height: 1.2; }
.nums2 b { display: block; font: 400 30px/1.1 Newsreader, serif; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.logos img { height: 24px; max-width: 92px; object-fit: contain; }
@media (max-width: 900px) {
  .nums2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .logos { gap: 10px 18px; }
  .logos img { height: 20px; max-width: 74px; }
  .stage { height: 176px; min-height: 176px; }
  .stagewrap { height: auto; }
}

.prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; }

/* page bands */
.band { position: relative; overflow: hidden; border-radius: 26px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 300px; }
.band__copy { position: relative; z-index: 2; padding: clamp(22px, 3vw, 40px) clamp(22px, 4vw, 52px); display: grid; gap: 12px; align-content: center; }
.band .scene { background: none; inset: 0; }
.jarwrap { position: absolute; inset: 0; }
.band svg.art { max-width: 400px; right: 28px; width: 38%; }
.band.ink { background: var(--ink); color: #fff; }
.eyebrow { font-weight: 600; font-size: 15px; }
.band h1 { font-size: clamp(34px, 3.900vw, 52px); line-height: 1.06; }
.band h1 .line { white-space: normal; }
.dek { font-size: 19px; line-height: 1.42; max-width: 33em; }
.bylines { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.500px; }
.bylines a { text-decoration: underline; text-underline-offset: 3px; }

/* reading */
.read { display: grid; grid-template-columns: 200px minmax(0, 680px) 250px; justify-content: space-between; gap: 36px; padding-top: 40px; }
.toc { position: sticky; top: 92px; align-self: start; font-size: 15px; }
.toc b { display: block; font-weight: 600; margin-bottom: 8px; }
.toc a { position: relative; display: block; padding: 5px 0; color: var(--muted); line-height: 1.3; z-index: 0; transition: color .2s; }
.toc a::before { content: ""; position: absolute; z-index: -1; left: -8px; right: 0; top: 2px; bottom: 2px; border-radius: 7px; background: var(--c, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.toc a.on { color: var(--ink); font-weight: 500; }
.toc a.on::before { transform: scaleX(1); }
.body { font: 400 20.500px/1.58 Newsreader, Georgia, serif; font-variant-numeric: lining-nums; }
.body > * + * { margin-top: 1em; }
.body h2 { font-size: 32px; line-height: 1.12; margin-top: 1.5em; scroll-margin-top: 90px; }
.body ol, .body ul { padding-left: 1.2em; }
.body li + li { margin-top: .35em; }
.body li::marker { font-weight: 500; }
.body a { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.short { background: var(--soft); border-radius: 18px; padding: 20px 24px; font: 400 16.500px/1.45 "Schibsted Grotesk", sans-serif; }
.short b { display: block; font: 400 22px Newsreader, serif; margin-bottom: 8px; }
.short ul { margin: 0; padding-left: 1.1em; }
.own { font: 400 15px/1.4 "Schibsted Grotesk", sans-serif; border-radius: 18px; background: #EAF2FD; padding: 20px 24px; }
.own b { font-weight: 600; }
.ownbar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; margin: 12px 0 8px; background: var(--ink); position: relative; color: #fff; }
.ownbar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(.15); transform-origin: left; }
.seen .ownbar i { animation: own 5s ease-in-out .2s infinite alternate; }
@keyframes own { to { transform: scaleX(1); } }
.ownkey { display: flex; justify-content: space-between; color: var(--muted); }
.body .hl { display: inline; background: linear-gradient(var(--gold), var(--gold)) 0 88% / 0 42% no-repeat; transition: background-size .9s var(--ease) .15s; }
.body .hl::before { display: none; }
.body .hl.seen { background-size: 100% 42%; }
.note-legal { font: 400 14.500px/1.45 "Schibsted Grotesk", sans-serif; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.aside { position: sticky; top: 92px; align-self: start; display: grid; gap: 14px; }
.next { position: relative; display: block; overflow: hidden; background: var(--c, var(--gold)); --a: #fff; border-radius: 18px; padding: 18px; min-height: 196px; }
.next b { display: block; font: 400 25px/1.1 Newsreader, serif; letter-spacing: -.015em; }
.next small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; max-width: 11em; }
.next svg { position: absolute; right: -10px; bottom: -14px; width: 92px; transition: transform .4s var(--spring); }
.next:hover svg { transform: translateY(-5px) rotate(-4deg); }

/* comments */
.talk { max-width: 680px; margin: 52px 0 0 auto; margin-inline: auto; }
.talkwrap { padding-top: 12px; }
.talk h2 { display: flex; align-items: baseline; gap: 10px; }
.talk h2 small { font: 500 16px "Schibsted Grotesk", sans-serif; color: var(--muted); }
.talk .rules { color: var(--muted); margin-top: 6px; font-size: 15.500px; }
.say { display: grid; gap: 8px; margin-top: 16px; background: var(--soft); border-radius: 18px; padding: 14px; }
.say input, .say textarea { width: 100%; border: 1.500px solid transparent; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 16px; resize: vertical; }
.say input:focus, .say textarea:focus { outline: 0; border-color: var(--ink); }
.say .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.say button { height: 44px; padding: 0 22px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; transition: transform .2s var(--ease); }
.say button:hover { transform: translateY(-2px); }
.cmt { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; }
.talk .list { margin-top: 18px; }
.ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--gold)); font: 500 18px Newsreader, serif; }
.cmt b { font-weight: 600; }
.cmt time { color: var(--muted); font-size: 14px; margin-left: 6px; }
.cmt p { margin-top: 2px; }
.cmt .re { background: none; border: 0; padding: 0; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cmt.reply { margin-left: 50px; border-top: 0; padding-top: 0; }
.cmt.new { animation: rowIn .55s var(--ease) both; }
.pending { display: inline-block; font-size: 12.500px; font-weight: 600; background: var(--butter); border-radius: 6px; padding: 0 7px; margin-left: 6px; }
.sample { font-size: 13.500px; color: var(--muted); margin-top: 12px; }
@keyframes rowIn { from { opacity: 0; transform: translateY(14px); } }

/* topic page */
.stats { display: flex; flex-wrap: wrap; gap: 8px 34px; margin-top: 6px; }
.stats div { font-size: 14.500px; color: #C9D0DF; line-height: 1.2; }
.stats b { display: block; font: 400 38px/1.1 Newsreader, serif; color: #fff; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.band .flip { vertical-align: -.22em; }
.pills { position: relative; display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 14px; }
.pills i { position: absolute; left: 0; top: 0; height: 40px; border-radius: 99px; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease); }
.pills button { position: relative; height: 40px; padding: 0 16px; border: 0; background: none; border-radius: 99px; font-weight: 500; cursor: pointer; transition: color .25s; }
.pills button[aria-pressed="true"] { color: #fff; }
.table { border-top: 1px solid var(--line); }
.tr { display: grid; grid-template-columns: 120px minmax(0, 1.5fr) 100px 92px minmax(0, 1fr) 68px 96px; gap: 14px; align-items: center; min-height: 66px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
.tr img { height: 28px; max-width: 110px; object-fit: contain; object-position: left; display: block; }
.tr b { font-weight: 500; }
.tr small { display: block; color: var(--muted); font-size: 13.500px; }
.tr .tag { display: inline-block; font-size: 12px; font-weight: 600; background: var(--butter); border-radius: 6px; padding: 0 6px; margin-left: 4px; position: static; }
.tr .bar2 { height: 8px; border-radius: 9px; background: #EFECE3; overflow: hidden; }
.tr .bar2 i { display: block; height: 100%; border-radius: 9px; background: var(--ink); transform-origin: left; transform: scaleX(var(--w)); animation: grow 1s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 120ms); }
@keyframes grow { from { transform: scaleX(0); } }
.tr .pct { font: 400 25px Newsreader, serif; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.tr a.go { justify-self: end; height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; border: 1.500px solid var(--ink); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.tr a.go:hover { background: var(--ink); color: #fff; }
.tablefoot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; color: var(--muted); font-size: 14px; }
.ghost { height: 42px; padding: 0 20px; border-radius: 99px; background: var(--gold); border: 0; font-weight: 600; cursor: pointer; color: var(--ink); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.three svg { width: 42px; margin-bottom: 12px; }
.three h3 { font-size: 25px; line-height: 1.14; margin-bottom: 6px; }
.three p { color: #3C4660; }
.guides { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.faq2 { max-width: 780px; }
.faq2 details { border-top: 1px solid var(--line); }
.faq2 details:last-child { border-bottom: 1px solid var(--line); }
.faq2 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; font: 400 22px/1.2 Newsreader, serif; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary::after { content: "+"; font-family: "Schibsted Grotesk", sans-serif; transition: transform .3s var(--spring); }
.faq2 details[open] summary::after { transform: rotate(45deg); }
.faq2 details p { padding-bottom: 16px; color: #3C4660; animation: rowIn .35s var(--ease); }
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; background: var(--ink); color: #fff; border-radius: 20px; padding: 16px 24px; }
.strip svg { width: 40px; height: 40px; flex: none; overflow: visible; }
.strip div { flex: 1 1 260px; line-height: 1.3; }
.strip b { font: 400 24px Newsreader, serif; display: block; }
.strip small { color: #C9D0DF; font-size: 14px; }
.strip form { display: flex; gap: 8px; flex: 1 1 340px; }
.strip input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 18px; border-radius: 99px; border: 1.500px solid rgba(255,255,255,.5); background: transparent; color: #fff; }
.strip input::placeholder { color: #C9D0DF; }
.strip button { height: 46px; padding: 0 20px; border: 0; border-radius: 99px; background: var(--gold); color: var(--ink); font-weight: 600; cursor: pointer; white-space: nowrap; }

/* blog */
.bloghead { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 18px; padding: 22px 0 22px; }
.bloghead h1 { font-size: clamp(38px, 5vw, 66px); }
.bloghead .flip { color: var(--ink); --c: var(--gold); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.blog-grid .post { grid-column: auto; animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--n, 0) * 40ms); }
.blog-grid .post.hide { display: none; }

@media (max-width: 900px) {
  .band { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 22px; }
  .band__copy { padding: 22px 18px 110px; }
  .band svg.art { width: 44%; right: 12px; }
  .read { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .toc { display: none; }
  .aside { position: static; grid-template-columns: minmax(0, 1fr); }
  .body { font-size: 19px; }
  .body h2 { font-size: 28px; }
  .cmt.reply { margin-left: 24px; }
  .tr { grid-template-columns: 92px minmax(0, 1fr) 72px; row-gap: 2px; padding: 12px 0; }
  .tr img { max-width: 86px; height: 24px; }
  .tr > .term, .tr > .min, .tr > .bar2 { display: none; }
  .tr > .acct { grid-column: 1 / 3; grid-row: 2; }
  .tr > .pct { grid-row: 1; grid-column: 3; }
  .tr > .go { grid-column: 3; grid-row: 2; padding: 0 10px; height: 32px; font-size: 13px; white-space: nowrap; }
  .tr > .pct { font-size: 22px; }
  .three { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .strip form { flex-wrap: wrap; }
}

/* bands: illustration has its own column, so it can't cover text */
.band { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(220px, 30%, 400px)); min-height: 280px; }
.band__art { position: relative; overflow: hidden; }
.band__art .scene { position: absolute; inset: 0; transform: none; visibility: visible; }
.band__art svg.art { width: 100%; max-width: none; right: 0; }
.crumb { font-size: 14px; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.band.ink .crumb { color: #C9D0DF; }
.disc { font-size: 13.500px; opacity: .85; }
.disc a { text-decoration: underline; text-underline-offset: 3px; }
.next { display: flex; flex-direction: column; min-height: 0; padding: 16px 16px 0; overflow: hidden; }
.next svg { position: static; align-self: flex-end; width: 78px; margin: 4px -8px -12px 0; }
.next small { max-width: none; }
.tocm { display: none; }

/* share, author, sources */
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 14.500px "Schibsted Grotesk", sans-serif; }
.share span { color: var(--muted); margin-right: 4px; }
.share button, .share a { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; background: var(--soft); border: 0; cursor: pointer; text-decoration: none; transition: background .2s, transform .2s var(--ease); }
.share button:hover, .share a:hover { background: var(--butter); transform: translateY(-2px); }
.author { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; background: var(--soft); border-radius: 18px; padding: 18px; font: 400 15.500px/1.45 "Schibsted Grotesk", sans-serif; }
.author svg { width: 56px; height: 56px; overflow: visible; }
.author b { display: block; font: 400 22px/1.2 Newsreader, serif; }
.author a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: currentColor; }
.body .faq2 { font: 400 16.500px/1.5 "Schibsted Grotesk", sans-serif; }
.body .faq2 summary { font-size: 21px; }
.src { font: 400 14.500px/1.5 "Schibsted Grotesk", sans-serif; color: var(--muted); }
.src b { color: var(--ink); font-weight: 600; }
.src ul { margin: 4px 0 0; padding-left: 1.1em; }
.src li + li { margin-top: 1px; }
.readnext { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.readnext .rowpost { border-top: 1px solid var(--line); }
.cmt .re + .re { margin-left: 12px; }

/* savings: sub navigation */
.subnav { position: sticky; top: 66px; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); margin-top: 18px; }
.subnav .pills { margin: 0; padding: 8px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.subnav .pills::-webkit-scrollbar { display: none; }
.subnav .pills i { top: 8px; }
.subnav .pills a { position: relative; flex: none; height: 40px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 99px; font-weight: 500; transition: color .25s; }
.subnav .pills a[aria-current="true"] { color: #fff; }

/* the four types, side by side */
.cmp { display: grid; grid-template-columns: 140px repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; }
.cmp > div { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; }
.cmp > div:not(.lab) { border-left: 1px solid var(--line); }
.cmp .lab { color: var(--muted); font-size: 14px; font-weight: 500; }
.cmp .top { border-top: 0; background: var(--c, #fff); --a: #fff; padding: 14px; display: grid; gap: 6px; align-content: start; transition: filter .2s; }
.cmp a.top { border-left: 1px solid rgba(20,33,61,.1); }
.cmp a.top:hover { filter: brightness(.97); }
.cmp a.top svg { width: 30px; transition: transform .35s var(--spring); }
.cmp a.top:hover svg { transform: translateY(-3px) rotate(-5deg); }
.cmp a.top b { font: 400 25px/1.1 Newsreader, serif; letter-spacing: -.015em; }
.cmp a.top small { font-size: 13.500px; font-weight: 500; }
.cmp .num { font: 400 32px/1 Newsreader, serif; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.cmp .upb { display: block; height: 6px; margin-top: 7px; background: #EFECE3; border-radius: 9px; overflow: hidden; }
.cmp .upb i { display: block; height: 100%; background: var(--ink); border-radius: 9px; transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) calc(var(--n) * 90ms); }
.seen .cmp .upb i { transform: scaleX(var(--w)); }

/* amount */
.amount { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; background: var(--ink); color: #fff; border-radius: 20px; padding: 16px 22px; }
.amount label { font: 400 23px/1.1 Newsreader, serif; }
.field { display: inline-flex; align-items: center; height: 46px; background: #fff; color: var(--ink); border-radius: 12px; padding: 0 12px; font: 400 22px Newsreader, serif; font-variant-numeric: lining-nums; }
.field input { width: 104px; border: 0; outline: 0; font: inherit; padding-left: 3px; background: none; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button { height: 36px; padding: 0 12px; background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 99px; font-weight: 500; font-size: 14.500px; cursor: pointer; transition: background .2s, color .2s; }
.chips button:hover { background: rgba(255,255,255,.2); }
.chips button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.amount .say2 { flex: 1 1 100%; color: #DDE2EC; font-size: 15px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 10px; }
.amount .say2 b { color: var(--gold); font-weight: 600; }
.amount .only { display: inline-flex; align-items: center; gap: 7px; font: 400 14.500px "Schibsted Grotesk", sans-serif; cursor: pointer; }
.amount .only input { accent-color: var(--gold); width: 16px; height: 16px; }

/* one section per type */
.tsec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(20px, 3.500vw, 44px); padding-top: clamp(38px, 5vw, 60px); scroll-margin-top: 110px; }
.tinfo { position: sticky; top: 136px; align-self: start; display: grid; gap: 9px; }
.tinfo .ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--c); --a: #fff; }
.tinfo .ic svg { width: 34px; }
.tinfo h2 { font-size: clamp(29px, 3vw, 38px); }
.tinfo p { color: #3C4660; font-size: 15.500px; line-height: 1.42; }
.tinfo p b { color: var(--ink); font-weight: 600; }
.tinfo a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.terms { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.terms button { height: 34px; padding: 0 12px; border: 1.500px solid var(--line); background: #fff; border-radius: 99px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.terms button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.trows { border-top: 1px solid var(--line); }
.acc2 { display: grid; grid-template-columns: 102px minmax(0, 1fr) 84px 72px 78px; gap: 12px; align-items: center; min-height: 66px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.28; animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.acc2 img { height: 26px; max-width: 96px; object-fit: contain; object-position: left; display: block; }
.acc2 b { font-weight: 500; }
.acc2 small { display: block; color: var(--muted); font-size: 13px; }
.acc2 .tg { display: inline-block; font-size: 11.500px; font-weight: 600; border-radius: 5px; padding: 0 5px; margin-left: 4px; background: var(--butter); }
.acc2 .tg.best { background: var(--ink); color: #fff; }
.acc2 .est { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.acc2 .est small { font-weight: 400; }
.acc2 .pct { font: 400 24px Newsreader, serif; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.acc2 a.go { justify-self: end; height: 36px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 99px; border: 1.500px solid var(--ink); font-weight: 600; font-size: 13.500px; white-space: nowrap; transition: background .2s, color .2s; }
.acc2 a.go:hover { background: var(--ink); color: #fff; }
.tmore { margin-top: 10px; background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.none { padding: 18px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.how4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.how4 svg { width: 36px; margin-bottom: 10px; }
.how4 h3 { font-size: 22px; line-height: 1.14; margin-bottom: 5px; }
.how4 p { color: #3C4660; font-size: 15px; line-height: 1.42; }
.nextsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nextsteps .next { min-height: 150px; }

/* blog: compact */
.bloghead { align-items: center; padding: 16px 0 14px; }
.bloghead h1 { font-size: clamp(32px, 3.800vw, 48px); }
.finder { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1.500px solid var(--line); border-radius: 99px; flex: 0 1 300px; }
.finder:focus-within { border-color: var(--ink); }
.finder input { width: 100%; border: 0; outline: 0; background: none; }
.bloglay { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 54px); margin-top: 6px; }
.toppost { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: center; padding-bottom: 16px; }
.toppost .cover { height: 190px; }
.toppost h2 { font-size: clamp(25px, 2.500vw, 32px); line-height: 1.12; margin-top: 2px; }
.toppost p { color: #3C4660; margin-top: 6px; font-size: 15.500px; line-height: 1.42; }
.rail2 { position: sticky; top: 86px; align-self: start; display: grid; gap: 26px; }
.rail2 h3 { font-size: 24px; margin-bottom: 8px; }
.picks5 { list-style: none; counter-reset: p; margin: 0; padding: 0; }
.picks5 li { counter-increment: p; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.3; font-weight: 500; }
.picks5 li::before { content: counter(p); font: 400 21px/1 Newsreader, serif; color: var(--muted); font-variant-numeric: lining-nums; }
.topicl { display: flex; flex-wrap: wrap; gap: 6px; }
.topicl button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; background: var(--soft); border: 0; border-radius: 99px; font-weight: 500; font-size: 14.500px; cursor: pointer; transition: background .2s; }
.topicl button:hover { background: var(--butter); }
.topicl svg { width: 18px; }
.topicl small { color: var(--muted); }
.minimail { background: var(--ink); color: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 8px; font-size: 14.500px; }
.minimail b { font: 400 24px/1.1 Newsreader, serif; }
.minimail input { height: 42px; padding: 0 14px; border-radius: 99px; border: 1.500px solid rgba(255,255,255,.5); background: transparent; color: #fff; width: 100%; }
.minimail input::placeholder { color: #C9D0DF; }
.minimail button { height: 42px; border: 0; border-radius: 99px; background: var(--gold); color: var(--ink); font-weight: 600; cursor: pointer; }
.nores { padding: 24px 0; color: var(--muted); display: none; }
.rowpost.hide, .toppost.hide { display: none; }

@media (max-width: 1040px) {
  .read { grid-template-columns: minmax(0, 1fr) 230px; }
  .toc { display: none; }
  .tocm { display: block; font: 400 15.500px "Schibsted Grotesk", sans-serif; background: var(--soft); border-radius: 14px; padding: 12px 16px; }
  .tocm summary { font-weight: 600; cursor: pointer; }
  .tocm a { display: block; padding: 5px 0; text-decoration: none; }
  .cmp { grid-template-columns: 112px repeat(4, minmax(0, 1fr)); }
  .cmp > div { padding: 10px; font-size: 14px; }
  .how4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .band__copy { padding: 20px 18px 8px; }
  .band__art { height: 104px; }
  .band__art svg.art { width: 150px; right: 12px; }
  .band__art svg.art.jar { width: 140px; }
  .read { grid-template-columns: minmax(0, 1fr); }
  .aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readnext, .nextsteps, .how4 { grid-template-columns: minmax(0, 1fr); }
  .subnav { top: 66px; }
  /* comparison becomes one card per type */
  .cmp { display: flex; flex-direction: column; border: 0; border-radius: 0; overflow: visible; }
  .cmp > * { order: var(--o); }
  .cmp .lab, .cmp .corner { display: none; }
  .cmp > div { border: 0 !important; padding: 2px 0 6px; font-size: 15px; }
  .cmp > div[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
  .cmp a.top { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; margin-top: 12px; border: 0; }
  .cmp a.top svg { grid-row: 1 / span 2; }
  .tsec { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tinfo { position: static; }
  .acc2 { grid-template-columns: 84px minmax(0, 1fr) 64px; row-gap: 3px; padding: 11px 0; }
  .acc2 img { max-width: 80px; height: 22px; }
  .acc2 .pct { grid-column: 3; grid-row: 1; font-size: 22px; }
  .acc2 .acct { grid-column: 1 / 3; grid-row: 2; }
  .acc2 .est { grid-column: 2; grid-row: 1; }
  .acc2 a.go { grid-column: 3; grid-row: 2; height: 32px; padding: 0 10px; font-size: 13px; }
  .bloglay { grid-template-columns: minmax(0, 1fr); }
  .rail2 { position: static; }
  .toppost { grid-template-columns: minmax(0, 1fr); }
  .toppost .cover { height: 150px; }
  .rowpost { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .rowpost .thumb { width: 72px; height: 60px; }
  .rowpost .thumb svg { width: 34px; margin: -17px 0 0 -17px; }
  .rowpost h3 { font-size: 19px; }
  .rowpost p.dek2 { display: none; }
}

.ci { cursor: default; }
.num2 { font: 400 25px/1.2 Newsreader, serif; color: var(--muted); font-variant-numeric: lining-nums; }
.band__art svg.art { top: 14px; bottom: 0; right: 14px; width: calc(100% - 14px); height: calc(100% - 14px); }
.band__art svg.art.full { right: 0; width: 100%; }
.slim { padding-block: clamp(32px, 4.500vw, 56px) 0; }
.lede2 { color: #3C4660; max-width: 40em; }

/* tools hub */
.tfeat { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 12px; background: var(--gold); --a: #fff; border-radius: 20px; padding: 16px 22px; }
.tfeat svg { width: 54px; }
.tfeat b { display: block; font: 400 26px/1.1 Newsreader, serif; letter-spacing: -.015em; }
.tfeat .go { background: var(--ink); color: #fff; height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; border-radius: 99px; font-weight: 600; white-space: nowrap; transition: transform .2s var(--ease); }
.tfeat:hover .go { transform: translateY(-2px); }
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin-top: 8px; }
.tl { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--n, 0) * 35ms); }
.tl.hide { display: none; }
.tl svg { width: 34px; transition: transform .35s var(--spring); }
.tl:hover svg { transform: translateY(-3px) rotate(-5deg); }
.tl h3 { font-size: 21px; line-height: 1.16; }
.tl p { color: #3C4660; font-size: 15px; line-height: 1.35; margin-top: 2px; }
.tl small { color: var(--muted); font-size: 13px; font-weight: 500; }
.privacy { display: flex; align-items: center; gap: 8px; font-size: 14.500px; }

/* zakat */
.zak { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3.500vw, 44px); padding-top: 28px; align-items: start; }
.gk { padding: 18px 0 22px; border-top: 1px solid var(--line); }
.gk:first-child { border-top: 0; padding-top: 0; }
.gk h2 { font-size: 27px; display: flex; gap: 10px; align-items: baseline; }
.gk h2 span { font-size: 19px; color: var(--muted); font-variant-numeric: lining-nums; }
.gk > p { color: #3C4660; font-size: 15px; margin-top: 2px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 12px; }
.fld label { display: block; font-weight: 500; font-size: 15px; }
.fld small { display: block; color: var(--muted); font-size: 13.500px; line-height: 1.3; min-height: 2.6em; }
.money { display: flex; align-items: center; height: 48px; border: 1.500px solid var(--line); border-radius: 12px; padding: 0 12px; margin-top: 4px; font: 400 21px Newsreader, serif; font-variant-numeric: lining-nums; transition: border-color .2s; }
.money:focus-within { border-color: var(--ink); }
.money input { width: 100%; border: 0; outline: 0; background: none; font: inherit; padding-left: 3px; }
.seg { position: relative; display: inline-flex; background: var(--soft); border-radius: 99px; padding: 3px; margin-top: 10px; }
.seg button { height: 36px; padding: 0 16px; border: 0; background: none; border-radius: 99px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.sampletag { display: inline-block; font-size: 12px; font-weight: 600; background: var(--butter); border-radius: 5px; padding: 0 6px; margin-left: 6px; }
.res { position: sticky; top: 86px; background: var(--ink); color: #fff; border-radius: 22px; padding: 22px; display: grid; gap: 10px; }
.res small { color: #C9D0DF; }
.res .due { font: 400 clamp(48px, 5.500vw, 68px)/1 Newsreader, serif; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.res .verdict { font-size: 15px; line-height: 1.38; border-top: 1px solid rgba(255,255,255,.16); padding-top: 10px; }
.bk { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 2px 10px; font-size: 14px; align-items: center; }
.bk b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.bk .tb { grid-column: 1 / -1; display: block; height: 5px; border-radius: 9px; background: rgba(255,255,255,.14); overflow: hidden; }
.bk .tb i { display: block; height: 100%; background: var(--c, var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); border-radius: 9px; }

/* check-up */
.qwrap { max-width: 720px; margin: 0 auto; padding-top: 18px; min-height: 520px; }
.qbar { height: 6px; border-radius: 9px; background: var(--soft); overflow: hidden; margin-bottom: 18px; }
.qbar i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.qcard { transition: opacity .2s, transform .3s var(--ease); }
.qcard.out { opacity: 0; transform: translateX(-22px); }
.qcard.in { animation: qIn .4s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateX(26px); } }
.qcard small { color: var(--muted); font-weight: 500; }
.qcard h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; margin: 4px 0 18px; }
.qopt { display: flex; align-items: center; width: 100%; min-height: 62px; padding: 12px 20px; margin-bottom: 8px; background: #fff; border: 1.500px solid var(--line); border-radius: 16px; font-size: 17.500px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.qopt:hover { border-color: var(--ink); background: var(--butter); transform: translateX(4px); }
.qback { background: none; border: 0; padding: 8px 0; font-weight: 500; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rs { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); animation: rowIn .5s var(--ease) both; animation-delay: calc(var(--n) * 70ms); }
.rs svg { width: 38px; }
.rs h3 { font-size: 23px; line-height: 1.15; }
.rs p { color: #3C4660; font-size: 15.500px; margin-top: 2px; }
.rs a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.rlabel { font-weight: 600; margin-top: 18px; padding-bottom: 8px; }
.dones { display: flex; flex-wrap: wrap; gap: 6px; }
.dones span { background: var(--soft); border-radius: 99px; padding: 6px 12px; font-size: 14.500px; font-weight: 500; }

/* checklists */
.chk { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(22px, 4vw, 54px); padding-top: 6px; align-items: start; }
.chk h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 8px; }
.ci { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; animation: rowIn .4s var(--ease) both; animation-delay: calc(var(--n) * 45ms); }
.ci input { position: absolute; opacity: 0; }
.box { width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--ink); display: grid; place-items: center; transition: background .2s, transform .3s var(--spring); }
.box svg { width: 16px; transform: scale(0); transition: transform .3s var(--spring); }
.ci input:checked + .box { background: var(--gold); transform: scale(1.06); }
.ci input:checked + .box svg { transform: scale(1); }
.ci input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.ci h3 { font-size: 23px; line-height: 1.16; }
.ci p { color: #3C4660; font-size: 15.500px; margin-top: 2px; }
.score { position: sticky; top: 86px; background: var(--soft); border-radius: 20px; padding: 18px; display: grid; gap: 10px; }
.ring { width: 96px; height: 96px; }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: #E4E0D4; }
.ring .fg { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .5s var(--ease); }
.ring text { font: 400 25px Newsreader, serif; text-anchor: middle; dominant-baseline: central; fill: var(--ink); font-variant-numeric: lining-nums; }
.score blockquote { margin: 0; font: 400 20px/1.25 Newsreader, serif; }
.score small { color: var(--muted); font-size: 13.500px; line-height: 1.35; }
.score a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* start here */
.steps2 { list-style: none; margin: 0; padding: 0; position: relative; max-width: 820px; }
.steps2::before, .steps2::after { content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 3px; background: var(--line); border-radius: 9px; }
.steps2::after { background: var(--gold); transform: scaleY(var(--p, 0)); transform-origin: top; }
.st { position: relative; z-index: 1; display: grid; grid-template-columns: 42px 48px minmax(0, 1fr); gap: 14px; padding: 15px 0; }
.st .n { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 400 21px Newsreader, serif; font-variant-numeric: lining-nums; }
.st__ic svg { width: 44px; }
.st h3 { font-size: 26px; line-height: 1.14; }
.st p { color: #3C4660; margin-top: 2px; }
.st a { font-weight: 600; font-size: 15.500px; }

/* topic */
.todo { list-style: none; margin: 0; padding: 0; counter-reset: d; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.todo li { counter-increment: d; }
.todo li::before { content: counter(d); display: block; font: 400 52px/1 Newsreader, serif; color: var(--c, var(--lilac)); font-variant-numeric: lining-nums; margin-bottom: 4px; }
.todo h3 { font-size: 24px; line-height: 1.14; margin-bottom: 4px; }
.todo p { color: #3C4660; font-size: 15.500px; }
.tt2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 54px); }
.tt2 .stack { display: grid; gap: 12px; align-content: start; }

/* glossary */
.azbar { position: sticky; top: 66px; z-index: 10; background: #fff; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); margin-top: 16px; }
.azbar a { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-weight: 600; font-size: 14.500px; transition: background .2s; }
.azbar a:hover { background: var(--butter); }
.lgrp { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.lgrp h2 { font-size: 40px; }
.lgrp > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 34px; }
.term h3 { font-size: 23px; line-height: 1.2; }
.term p { color: #3C4660; font-size: 15.500px; margin-top: 2px; }
.term.hide, .lgrp.hide { display: none; }
.lgrp.flash h2 { animation: flash 1.1s var(--ease); }
@keyframes flash { 30% { transform: scale(1.25); color: #D69A00; } }

/* about */
.ab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 70px); padding-top: 36px; }
.ab .body { font-size: 20.500px; }
.ab .body h2 { font-size: 29px; }
.pr { display: grid; gap: 0; align-self: start; position: sticky; top: 86px; }
.pr > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.pr svg { width: 34px; }
.pr h3 { font-size: 22px; line-height: 1.16; }
.pr p { color: #3C4660; font-size: 15px; margin-top: 2px; }
.pr a { text-decoration: underline; text-underline-offset: 3px; }
.money2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.money2 > div { border-radius: 18px; padding: 18px; background: var(--c); --a: #fff; }
.money2 svg { width: 34px; margin-bottom: 8px; }
.money2 h3 { font-size: 24px; line-height: 1.14; }
.money2 p { font-size: 15px; margin-top: 3px; }
.noonart { position: absolute; right: 10%; bottom: 22px; width: 76%; max-width: 240px; overflow: visible; }

/* 404 */
.nf { min-height: 62vh; display: grid; align-content: center; justify-items: start; gap: 14px; }
.nf h1 { font-size: clamp(40px, 7vw, 92px); line-height: 1.02; letter-spacing: -.03em; }
.nf .strike { position: relative; display: inline-block; }
.nf .strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .08em; background: #D34B2F; border-radius: 9px; transform: scaleX(0); transform-origin: left; animation: strike .8s var(--ease) .4s forwards; }
@keyframes strike { to { transform: scaleX(1); } }
.nf .ln { display: flex; flex-wrap: wrap; gap: 8px; }
.nf .ln a { height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 99px; background: var(--soft); font-weight: 500; transition: background .2s; }
.nf .ln a:first-child { background: var(--gold); font-weight: 600; }

@media (max-width: 900px) {
  .band__art svg.art { top: 6px; height: calc(100% - 6px); }
  .tgrid { grid-template-columns: minmax(0, 1fr); }
  .tfeat { grid-template-columns: 44px minmax(0, 1fr); }
  .tfeat svg { width: 44px; }
  .tfeat .go { grid-column: 1 / -1; justify-content: center; }
  .zak, .chk, .tt2, .ab, .money2, .todo { grid-template-columns: minmax(0, 1fr); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fld small { min-height: 0; }
  .res, .score, .pr { position: static; }
  .res { order: -1; }
  .lgrp { grid-template-columns: minmax(0, 1fr); }
  .lgrp > div { grid-template-columns: minmax(0, 1fr); }
  .st { grid-template-columns: 42px minmax(0, 1fr); }
  .st__ic { display: none; }
  .noonart { width: 110px; right: 18px; bottom: 12px; }
  .todo li::before { font-size: 42px; }
}

/* ------------------------------------------------------------------ */
/* Additions for the full site                                         */
/* ------------------------------------------------------------------ */
:root { --red: #C8402A; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.hide { display: none !important; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.hero :focus-visible, .foot :focus-visible, .mail :focus-visible, .strip :focus-visible { outline-color: var(--gold); }
.nb { white-space: nowrap; }

/* search */
.searchpanel { border-top: 1px solid var(--line); background: #fff; padding: 12px 0 16px; }
.searchpanel input { width: 100%; height: 48px; padding: 0 18px; border: 1.500px solid var(--ink); border-radius: 99px; font-size: 17px; }
.sres { display: grid; margin-top: 8px; }
.sres a { display: flex; justify-content: space-between; gap: 14px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.sres a:hover b { text-decoration: underline; }
.sres b { font-weight: 500; }
.sres span { color: var(--muted); font-size: 14px; flex: none; }
.mobile-sheet details { border-bottom: 1px solid var(--line); }
.mobile-sheet summary { padding: 10px 0; font-weight: 600; cursor: pointer; }
.mobile-sheet details a { padding-left: 12px; font-weight: 400; }

/* ticker with logos */
.tick a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tick img { height: 20px; max-width: 62px; object-fit: contain; flex: none; }
.tick a:hover span { text-decoration: underline; }

/* top rates beside the link to tools */
.ratesplit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.rates h2, .toolcard h2 { font-size: clamp(27px, 2.800vw, 36px); line-height: 1.1; }
.rates a.rate { transition: background .2s; }
.rates a.rate:hover b { text-decoration: underline; }
.toolcard { position: relative; overflow: hidden; background: var(--sky); --a: #fff; border-radius: 22px; padding: clamp(22px, 3vw, 32px); }
.toolcard p { margin-top: 6px; max-width: 24em; }
.toolcard ul { list-style: none; margin: 14px 0 0; padding: 0; position: relative; z-index: 1; }
.toolcard li a { display: inline-block; padding: 7px 0; font: 400 23px/1.2 Newsreader, serif; }
.toolcard li a:hover { text-decoration: underline; }
.toolcard svg { position: absolute; right: -16px; bottom: -22px; width: 150px; }
@media (max-width: 900px) { .ratesplit { grid-template-columns: minmax(0, 1fr); } .toolcard svg { width: 110px; } }

/* status messages and forms */
.status { flex-basis: 100%; font-size: 14px; min-height: 0; margin: 0; }
.status:empty { display: none; }
.mail .status a, .strip .status a, .minimail .status a { text-decoration: underline; color: var(--gold); }
.mail small a { text-decoration: underline; }
.mail__copy p a { text-decoration: underline; text-underline-offset: 3px; }
.minimail form { display: grid; gap: 8px; }
.say .status { color: var(--ink); }
.empty { color: var(--muted); padding: 14px 0; }

/* disclaimers */
.legal { margin-top: 14px; padding: 12px 16px; background: var(--soft); border-radius: 14px; color: #414B63; font: 400 14px/1.45 "Schibsted Grotesk", sans-serif; }
.legal p + p { margin-top: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.body .legal { margin-top: 1.4em; }
.legal-foot { line-height: 1.5; }
.print-only { display: none; }
.statusnote { margin-top: 14px; padding: 12px 16px; background: var(--butter); border-radius: 14px; font-size: 15px; line-height: 1.4; }

/* compare and topic pages */
.pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 30px; }
.pts svg { width: 36px; margin-bottom: 10px; }
.pts h3 { font-size: 23px; line-height: 1.14; margin-bottom: 4px; }
.pts p { color: #3C4660; font-size: 15.500px; line-height: 1.42; }
.todo { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.provs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; }
.prov { border-top: 1px solid var(--line); padding-top: 14px; }
.prov img { height: 30px; max-width: 130px; object-fit: contain; object-position: left; display: block; margin-bottom: 8px; }
.prov h3 { font-size: 23px; }
.prov p { color: #3C4660; font-size: 15.500px; margin-top: 2px; }
.prov a { display: inline-block; margin-top: 6px; font-weight: 600; font-size: 15px; }
.plainpage { max-width: 720px; padding-top: 30px; }
.plainpage h2 { font-size: 28px; }
.band__art svg.iconart { top: auto; bottom: 14px; width: min(150px, 80%); height: auto; }
.band__art .noonart { position: absolute; }
.tablewrap { overflow-x: auto; font: 400 15.500px/1.4 "Schibsted Grotesk", sans-serif; }
.tablewrap table { border-collapse: collapse; width: 100%; }
.tablewrap th, .tablewrap td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.tablewrap th { font-weight: 600; }
@media (max-width: 900px) { .pts, .provs { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* what to check */
.chkgrid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(22px, 4vw, 54px); align-items: start; }
.chk { display: block; }
@media (max-width: 900px) { .chkgrid { grid-template-columns: minmax(0, 1fr); } }

/* calculators */
.toolsec { padding-top: 24px; }
.tool { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3.500vw, 44px); align-items: start; }
.tool__in { display: grid; gap: 4px; }
.slider { padding: 10px 0; border-bottom: 1px solid var(--line); }
.slider__top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.slider label { font-weight: 500; font-size: 15.500px; }
.slider input[type=number] { width: 118px; height: 40px; border: 1.500px solid var(--line); border-radius: 10px; padding: 0 10px; text-align: right; font: 400 19px Newsreader, serif; font-variant-numeric: lining-nums; flex: none; }
.slider input[type=number]:focus { outline: 0; border-color: var(--ink); }
.slider input[type=range] { display: block; width: 100%; margin-top: 4px; accent-color: var(--ink); }
.hint { color: var(--muted); font-size: 14.500px; padding-top: 10px; }
.tool__out { position: sticky; top: 86px; background: var(--ink); color: #fff; border-radius: 22px; padding: 22px; display: grid; gap: 10px; }
.tool__out small { color: #C9D0DF; font-size: 14px; }
.due { font: 400 clamp(46px, 5.500vw, 68px)/1 Newsreader, serif; letter-spacing: -.03em; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.due--text { font-size: clamp(30px, 3.400vw, 42px); line-height: 1.1; }
.due--sm { font-size: clamp(34px, 3.800vw, 46px); }
.tool__out .verdict { font-size: 14.500px; line-height: 1.4; color: #DDE2EC; border-top: 1px solid rgba(255,255,255,.16); padding-top: 10px; }
.lines { display: grid; gap: 7px; }
.lines > div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.14); }
.lines b { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.link2 { font-weight: 600; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.stack { display: flex; height: 12px; border-radius: 7px; overflow: hidden; gap: 2px; background: rgba(255,255,255,.14); }
.stack i { display: block; transition: width .5s var(--ease); background: #fff; }
.stack i.left { background: var(--gold); }
.split { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; }
.chart { display: flex; align-items: end; gap: 6px; height: 138px; }
.chart > div { flex: 1; display: flex; flex-direction: column; justify-content: end; height: 100%; gap: 5px; font-size: 12px; text-align: center; color: #C9D0DF; }
.chart i { display: block; border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.55); transition: height .6s var(--ease); min-height: 2px; }
.chart > div:last-child i { background: var(--gold); }
.growth-svg { display: block; width: 100%; height: auto; overflow: visible; }
.growth-svg .ln-paid { fill: none; stroke: #C9D0DF; stroke-width: 1.400; stroke-dasharray: 3 4; }
.growth-svg .ln-grow { fill: none; stroke: var(--gold); stroke-width: 2.600; }
.growth-svg .area { fill: var(--gold); opacity: .18; }
.growth-svg .grid-l { stroke: rgba(255,255,255,.2); stroke-width: 1; }
.growth-svg text { fill: #C9D0DF; font: 400 13px "Schibsted Grotesk", sans-serif; }
.backlink { margin-top: 16px; font-weight: 600; }
.qh { font-size: clamp(30px, 3.800vw, 44px); line-height: 1.08; margin: 4px 0 18px; }
@media (max-width: 900px) { .tool { grid-template-columns: minmax(0, 1fr); } .tool__out { position: static; order: -1; } .slider input[type=number] { width: 104px; } }

/* print: the guide becomes the PDF */
@media print {
  @page { margin: 18mm 16mm; }
  body { font-size: 12pt; background: #fff; }
  .bar, .foot, .no-print, .skip, .tick, .band__art { display: none !important; }
  .band { display: block; min-height: 0 !important; border-radius: 0; background: none !important; padding: 0; }
  .band__copy { padding: 0 0 8mm; }
  .crumb { display: none; }
  .wrap { width: 100%; }
  .plainpage { max-width: none; padding-top: 0; }
  .body { font-size: 12.500pt; line-height: 1.5; }
  .body h2 { font-size: 18pt; margin-top: 7mm; break-after: avoid; }
  .body blockquote, .body li { break-inside: avoid; }
  .legal { background: none; padding: 0; }
  .print-only { display: block; font-size: 9.500pt; color: #555; margin-top: 6mm; }
}

.body blockquote { margin: 1.2em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--gold); font-size: 1.1em; line-height: 1.34; font-style: italic; }

/* Five things: compact cards */
.myths { margin-top: clamp(44px, 6vw, 76px); }
.myths .head { margin-bottom: 18px; }
.myths .head p { color: var(--muted); }
.mrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 18px; background: var(--soft); border-top: 4px solid var(--c); transition: transform .3s var(--spring), box-shadow .3s; }
.mcard:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -22px rgba(20,33,61,.5); }
.mtop { display: flex; justify-content: space-between; align-items: center; }
.mno { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--c); font: 400 17px Newsreader, serif; font-variant-numeric: lining-nums; }
.mcard .mtop svg { width: 26px; --a: var(--c); transition: transform .4s var(--spring); }
.seen .mcard .mtop svg { animation: aPop .6s var(--spring) both; animation-delay: calc(.2s + var(--n) * .1s); }
.mcard:hover .mtop svg { transform: rotate(-12deg); }
.mcard q { font: 400 19px/1.22 Newsreader, serif; letter-spacing: -.01em; }
.mcard p { font-size: 14px; line-height: 1.4; color: #3C4660; }
.mcard p b { color: var(--ink); font-weight: 600; }
.mlink { margin-top: auto; font-weight: 600; font-size: 13.500px; }
@media (max-width: 1100px) { .mrow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; } .mrow::-webkit-scrollbar { display: none; } .mcard { flex: 0 0 min(270px, 78%); scroll-snap-align: start; } }

/* front panel with the Latest column */
.heropair { display: grid; grid-template-columns: minmax(0, 8.3fr) minmax(0, 3.7fr); gap: 12px; align-items: stretch; }
.heropair .hero h1 { font-size: clamp(34px, 3.700vw, 54px); }
.heropair .copy { padding: 24px 22px 20px 26px; gap: 15px; }
.heropair .sub { font-size: 16px; }
.heropair .btn { height: 50px; padding: 0 20px; font-size: 16px; }
@media (min-width: 901px) { .heropair .rail button { font-size: 14px; gap: 7px; } }
.heropair .note { width: min(240px, 72%); }
.hero .btn { background: var(--c, var(--gold)); transition: background .45s var(--ease), transform .25s var(--ease), box-shadow .25s; }
.hero .btn:hover { box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.side1 { display: grid; gap: 12px; grid-template-rows: minmax(0, 1fr) auto; contain: size; min-height: 0; }
.nlist { background: var(--soft); border-radius: 22px; padding: 18px 20px 8px; display: flex; flex-direction: column; overflow: hidden; }
.nhead { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; }
.nhead b { font: 400 25px Newsreader, serif; }
.nhead a { font-weight: 600; font-size: 14px; }
.nitem { display: grid; gap: 1px; padding: 10px 0; border-top: 1px solid #E2DED2; }
.ncat { font-size: 12.500px; font-weight: 600; color: var(--muted); }
.nt { font: 400 19px/1.2 Newsreader, serif; }
.nitem:hover .nt { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.nd { font-size: 12.500px; color: var(--muted); }
.gcta { position: relative; overflow: hidden; background: var(--gold); --a: #fff; border-radius: 22px; padding: 16px 20px; display: grid; gap: 4px; justify-items: start; }
.gcta small { font-size: 12.500px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.gcta b { font: 400 21px/1.15 Newsreader, serif; max-width: 11em; }
.btn2 { margin-top: 6px; background: var(--ink); color: #fff; height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 99px; font-weight: 600; font-size: 14.500px; }
.gcta > svg { position: absolute; right: -6px; bottom: -10px; width: 74px; transition: transform .4s var(--spring); }
.gcta:hover > svg { transform: translateY(-4px) rotate(-5deg); }
.lvl { font-weight: 600; }
@media (max-width: 1100px) { .heropair { grid-template-columns: minmax(0, 1fr); } .side1 { contain: none; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto; } .heropair .hero h1 { font-size: clamp(36px, 5vw, 60px); } }
@media (max-width: 700px) { .side1 { grid-template-columns: minmax(0, 1fr); } }

/* news and partners */
.mores { display: flex; gap: 18px; flex-wrap: wrap; }
.partner { justify-self: start; display: inline-block; font-size: 13px; font-weight: 600; background: var(--ink); color: #fff; border-radius: 7px; padding: 2px 9px; }
.partner a { color: #fff; text-decoration: underline; }
.supported { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: -2px 0 12px; }
.supported img { height: 24px; max-width: 120px; object-fit: contain; }
.sidebox { background: var(--soft); border-radius: 18px; padding: 16px; display: grid; gap: 4px; }
.sidebox h3 { margin-bottom: 4px; }
.sidebox small { color: var(--muted); font-size: 13px; margin-top: 4px; }
.srate { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #E2DED2; font-size: 14px; }
.srate img { height: 20px; max-width: 72px; object-fit: contain; object-position: left; }
.srate b { font: 400 21px Newsreader, serif; font-variant-numeric: lining-nums tabular-nums; }
.moves { list-style: none; margin: 0; padding: 0; }
.moves li { display: grid; gap: 1px; padding: 7px 0; border-top: 1px solid #E2DED2; font-size: 14px; }
.moves b { font-weight: 600; font-variant-numeric: tabular-nums; }
.moves .up { color: #1D6B3A; }
.moves .down { color: var(--red); }
.rail2 .rowpost { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
.rail2 .rowpost .thumb { width: 54px; height: 48px; }
.rail2 .rowpost .thumb svg { width: 26px; margin: -13px 0 0 -13px; }
.rail2 .rowpost h3 { font-size: 17px; }


/* ---- refinements, 9 November ---- */
/* the moving word sits on the text baseline everywhere */
.flip, .band .flip { vertical-align: baseline; margin-block: 0; }

/* logo: the coin drops, bounces and settles */
.logo .dot { transform-box: fill-box; transform-origin: center bottom; animation: coin 1.15s both .15s; }
.logo.again .dot { animation: coin 1.15s both; }
@keyframes coin {
  0% { transform: translateY(-260%); opacity: 0; animation-timing-function: cubic-bezier(.55,0,1,.45); }
  12% { opacity: 1; }
  40% { transform: translateY(0) scale(1.18, .8); animation-timing-function: cubic-bezier(0,.55,.45,1); }
  58% { transform: translateY(-55%) scale(.95, 1.06); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  74% { transform: translateY(0) scale(1.08, .9); animation-timing-function: cubic-bezier(0,.55,.45,1); }
  86% { transform: translateY(-14%); animation-timing-function: cubic-bezier(.55,0,1,.45); }
  100% { transform: none; opacity: 1; }
}

/* front panel cards: real details, with the illustration behind */
.stage .note { width: min(300px, 80%); padding: 14px 16px 12px; display: grid; gap: 6px; font-size: 13.500px; }
.stage .note small { font-size: 12px; font-weight: 600; color: var(--muted); }
.stage svg.art { width: 56%; max-width: 250px; right: 10px; opacity: .95; }
.fine { color: var(--muted); font-size: 11.500px; line-height: 1.3; }
.ownrow { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; }
@property --own { syntax: '<integer>'; inherits: false; initial-value: 20; }
@property --yr { syntax: '<integer>'; inherits: false; initial-value: 0; }
.ownnum { --own: 20; counter-reset: own var(--own); font: 400 34px/1 Newsreader, serif; font-variant-numeric: lining-nums tabular-nums; }
.ownnum::after { content: counter(own) '%'; }
.ownkey2 .yr { --yr: 0; counter-reset: yr var(--yr); }
.ownkey2 .yr::after { content: 'Year ' counter(yr); }
.ownbar2 { display: block; height: 10px; border-radius: 9px; background: var(--ink); overflow: hidden; }
.ownbar2 i { display: block; height: 100%; background: var(--c); transform: scaleX(.2); transform-origin: left; border-radius: 9px; }
.scene.on .ownnum { animation: ownup 3.2s var(--ease) .5s forwards; }
.scene.on .ownkey2 .yr { animation: yrup 3.2s var(--ease) .5s forwards; }
.scene.on .ownbar2 i { animation: barup 3.2s var(--ease) .5s forwards; }
@keyframes ownup { to { --own: 100; } }
@keyframes yrup { to { --yr: 25; } }
@keyframes barup { to { transform: scaleX(1); } }
.ownkey2 { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.stage .note p { line-height: 1.35; }
.chip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 9px 4px 6px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; font-weight: 500; }
.chip img { height: 16px; max-width: 60px; object-fit: contain; }
.big2 { font: 400 30px/1 Newsreader, serif; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.minichart { width: 100%; height: auto; overflow: visible; }
.minichart polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cpaid { stroke: #C9CDD6; stroke-width: 2; stroke-dasharray: 3 4; }
.cgrow { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene.on .cgrow { animation: draw 2.2s var(--ease) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ckey { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.ckey i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; background: var(--ink); }
.ckey .kp { background: #C9CDD6; }
.fund { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 10px; background: var(--soft); }
.fund img { width: 26px; height: 26px; object-fit: contain; }
.fund span { display: block; font-size: 11.500px; color: var(--muted); }
.fund b { font-weight: 600; font-size: 13px; line-height: 1.2; }
.fund em { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.fund em.no { background: #EDE9E0; color: var(--muted); }
.fund em.yes { background: var(--ink); color: #fff; }
.fund--to { background: #fff; border: 1.500px solid var(--ink); }
.scene.on .fund--to { animation: swapin .7s var(--spring) 1.1s both; }
.swap { justify-self: center; font-weight: 600; line-height: 1; }
.scene.on .swap { animation: nudge 1s ease-in-out .5s 2; }
@keyframes swapin { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
@keyframes nudge { 50% { transform: translateY(4px); } }
.rec, .chk2 { list-style: none; margin: 0; padding: 0; }
.rec li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed #DDD8CB; font-variant-numeric: tabular-nums; }
.rec li.tot { border-bottom: 0; padding-top: 6px; font-weight: 600; }
.rec li.tot b { font: 400 22px Newsreader, serif; }
.chk2 li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.chk2 i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: 11px; flex: none; }
.scene.on .rec li, .scene.on .chk2 li { animation: rowIn .45s var(--ease) both; animation-delay: calc(.45s + var(--n) * .22s); }
.scene.on .chk2 i { animation: aPop .5s var(--spring) both; animation-delay: calc(.6s + var(--n) * .22s); }

/* covers: one colour and icon per topic, like a series */
.tcover small { position: absolute; left: 18px; top: 16px; z-index: 1; font-size: 12.500px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.cover.tcover b { top: 40px; }
.tcover > svg:not(.g) { position: absolute; left: 18px; bottom: 16px; width: 28px; height: 28px; }
.lead .cover.tcover b { top: 44px; }

/* thumbnails beside every headline */
.thumb--logo { background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.thumb--logo img { max-width: 76%; max-height: 60%; object-fit: contain; }
.nitem { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; }
.nitem .thumb { position: relative; display: block; width: 46px; height: 46px; border-radius: 12px; background: var(--c); --a: #fff; overflow: hidden; }
.nitem .thumb svg { position: absolute; left: 50%; top: 50%; width: 26px; margin: -13px 0 0 -13px; }
.nb2 { display: grid; gap: 1px; }

/* slim rates strip */
.rstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; background: var(--soft); border-radius: 20px; padding: 16px 22px; }
.rstrip__t { display: grid; }
.rstrip__t b { font: 400 22px Newsreader, serif; }
.rstrip__t small { color: var(--muted); font-size: 13px; }
.rstrip__r { display: flex; flex-wrap: wrap; gap: 8px 22px; flex: 1; }
.rstrip__r a { display: flex; align-items: center; gap: 9px; }
.rstrip__r img { height: 22px; max-width: 80px; object-fit: contain; }
.rstrip__r b { font: 400 22px Newsreader, serif; font-variant-numeric: lining-nums tabular-nums; }
.rstrip__r a:hover b { text-decoration: underline; }

/* slim footer */
.foot { padding: 34px 0 26px; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__nav a { display: inline; padding: 0; color: #DDE2EC; }
.foot__nav a:hover { color: #fff; }
.foot .legal-foot { display: block; margin-top: 16px; padding-top: 0; border-top: 0; font-size: 13px; color: #AAB4C8; }
.foot .copy2 { display: block; margin-top: 8px; font-size: 12.500px; color: #8D97AD; border-top: 0; padding-top: 0; }
.mail { min-height: 0; }
.scenee { min-height: 220px; }

@media (max-width: 900px) {
  .stage { height: 250px; min-height: 250px; }
  .stage .note { width: 78%; padding: 11px 12px 10px; gap: 4px; font-size: 12.500px; }
  .stage svg.art { width: 34%; right: 6px; }
  .stage .note .fine, .stage .note p, .chip { display: none; }
  .rec li:nth-child(n+3):not(.tot) { display: none; }
  .ownnum { font-size: 28px; }
  .rstrip { padding: 14px 16px; }
}

/* ================= 10 November: structure, menu and motion ================= */
:root { --spring: cubic-bezier(.25,.9,.3,1); --inout: cubic-bezier(.65,0,.25,1); }

/* desktop menu: words and icons, no drop-downs */
.top .logo { margin-right: 14px; }
.mainnav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.mainnav .item { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px; border-radius: 12px; font-weight: 500; font-size: 15px; color: var(--ink); transition: background .2s; }
.mainnav .item svg { width: 18px; height: 18px; --a: var(--gold); flex: none; transition: transform .3s var(--spring); }
.mainnav .item:hover { background: var(--soft); }
.mainnav .item:hover svg { transform: rotate(-8deg); }
.mainnav .item[aria-current="page"] { background: var(--soft); }
.mainnav .item[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--gold); }
.top .start { margin-left: 8px; }
.burger { display: none; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--soft); font-weight: 600; font-size: 15px; cursor: pointer; }
.bl { position: relative; width: 18px; height: 12px; }
.bl i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--inout), top .3s var(--inout); }
.bl i:first-child { top: 2px; } .bl i:last-child { top: 8px; }
.burger[aria-expanded="true"] .bl i:first-child { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .bl i:last-child { top: 5px; transform: rotate(-45deg); }
@media (max-width: 1180px) { .mainnav .item svg { display: none; } .mainnav .item { padding: 0 9px; } }
@media (max-width: 1000px) {
  .mainnav, .top .start { display: none; }
  .burger { display: inline-flex; }
  .top .search { display: grid; margin-left: auto; }
}

/* phone menu: full screen, grouped, with icons */
.mobile-sheet { display: none; }
.mobile-sheet.open { display: block; position: fixed; left: 0; right: 0; top: 66px; bottom: 0; z-index: 29; overflow-y: auto; background: #fff; border-top: 1px solid var(--line); padding: 6px 0 30px; animation: sheetin .35s var(--inout); }
@keyframes sheetin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mobile-sheet .toplink, .mobile-sheet summary { display: flex; align-items: center; gap: 12px; padding: 14px 2px; font: 400 23px/1.2 Newsreader, serif; border-bottom: 1px solid var(--line); list-style: none; cursor: pointer; }
.mobile-sheet summary::-webkit-details-marker { display: none; }
.mobile-sheet summary .chev { margin-left: auto; width: 12px; height: 12px; transition: transform .25s; }
.mobile-sheet details[open] summary .chev { transform: rotate(180deg); }
.mobile-sheet details { border-bottom: 0; }
.mobile-sheet svg.g { width: 24px; height: 24px; --a: var(--gold); flex: none; }
.mobile-sheet .subs { display: grid; padding: 4px 0 12px 36px; border-bottom: 1px solid var(--line); }
.mobile-sheet .subs a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-weight: 500; font-size: 15.500px; }
.mobile-sheet .subs svg.g { width: 18px; height: 18px; }
.mobile-sheet .hubl { font-weight: 600; }
.mobile-sheet .sheetstart { display: flex; justify-content: center; gap: 8px; margin-top: 20px; padding: 14px; }
body.menu-open { overflow: hidden; }

/* front panel slides: card and illustration each get their own space */
.stage .scene { display: grid; grid-template-columns: minmax(0, 1fr) 34%; align-items: end; gap: 10px; padding: 14px; transform: none !important; visibility: hidden; z-index: 1; clip-path: circle(0% at var(--ox, 50%) 108%); transition: none; }
.stage .scene.prev { visibility: visible; z-index: 1; clip-path: circle(170% at var(--ox, 50%) 108%); }
.stage .scene.on { visibility: visible; z-index: 2; clip-path: circle(170% at var(--ox, 50%) 108%); transition: clip-path .9s var(--inout); }
.stage .scene .note { position: relative; left: auto; top: auto; align-self: start; width: auto; opacity: 1; transform: none; transition: none; }
.stage .scene.on .note { animation: place .75s cubic-bezier(.2,.7,.2,1) .3s both; }
@keyframes place { from { transform: translateY(-12px) rotate(-1.200deg); opacity: 0; box-shadow: 0 34px 40px -22px rgba(20,33,61,.4); } }
.stage .scene svg.art { position: relative; right: auto; bottom: auto; top: auto; width: 100%; max-width: 190px; justify-self: end; align-self: end; opacity: 1; transform: none; transition: none; }
.stage .scene svg.art.full { max-width: none; }
.stage .note .fine { margin-top: 2px; }

/* the moving word: letters roll like an odometer */
.flip > span, .flip > span.below, .flip > span.above { transform: none; opacity: 1; transition: none; }
.flip > span i { display: inline-block; font-style: inherit; transition: transform .55s var(--inout); transition-delay: calc(var(--i) * 24ms); }
.flip > span.below i { transform: translateY(115%); }
.flip > span.above i { transform: translateY(-115%); }
.flip > span.reset i { transition: none; }

/* lists and tables simply appear: no staggered fade-ups */
.tr, .acc2, .tl, .ci, .rs, .blog-grid .post, .cmt.new, .qcard.in, .ans.show { animation: none !important; }
.seen .mcard .mtop svg { animation: none; }

/* page changes: the page slides a little, forwards or backwards */
@view-transition { navigation: auto; }
.bar { view-transition-name: bar; }
::view-transition-old(root) { animation: vt-out .24s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(0,0,.2,1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-back; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(28px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-28px); } }
.navline { position: fixed; z-index: 70; left: 0; top: 0; height: 3px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.navline.go { transform: scaleX(.75); transition: transform 1.400s cubic-bezier(.1,.6,.2,1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* share buttons with each company's mark */
.share { gap: 8px; }
.share .sh { position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); cursor: pointer; transition: background .2s, color .2s, transform .2s var(--spring); }
.share .sh svg { width: 18px; height: 18px; }
.share .sh:hover { transform: translateY(-2px); }
.sh--wa:hover { background: #25D366 !important; color: #fff !important; }
.sh--x:hover { background: #000 !important; color: #fff !important; }
.sh--in:hover { background: #0A66C2 !important; color: #fff !important; }
.sh--fb:hover { background: #0866FF !important; color: #fff !important; }
.sh .copied { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; background: var(--ink); color: #fff; padding: 2px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sh.done .copied { opacity: 1; }

/* rate picker in calculators */
.ratepick { display: grid; gap: 5px; padding: 12px 14px; margin-bottom: 4px; background: var(--soft); border-radius: 14px; }
.ratepick label { font-weight: 600; font-size: 14.500px; }
.ratepick select { width: 100%; height: 44px; padding: 0 10px; border: 1.500px solid var(--line); border-radius: 10px; background: #fff; font-size: 15px; color: var(--ink); }
.ratepick select:focus { outline: 0; border-color: var(--ink); }
.ratepick small { color: var(--muted); font-size: 12.500px; }

/* compare hub */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ccard { display: flex; flex-direction: column; gap: 6px; padding: 20px; min-height: 220px; border-radius: 20px; background: var(--soft); border-top: 4px solid var(--c); transition: transform .25s var(--spring), box-shadow .25s; }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(20,33,61,.5); }
.ccard__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--c); --a: #fff; }
.ccard__ic svg { width: 28px; }
.ccard h2 { font-size: 25px; line-height: 1.12; margin-top: 6px; }
.ccard p { color: #3C4660; font-size: 15px; line-height: 1.4; }
.ccard__fig { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding-top: 8px; color: var(--muted); font-size: 13.500px; }
.ccard__fig b { font: 400 30px Newsreader, serif; color: var(--ink); font-variant-numeric: lining-nums; }
.ccard__fig--soon { font-weight: 600; color: var(--ink); }

/* newsletter sign-up inside a banner */
.nlform form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; margin-top: 4px; }
.nlform input[type=email] { flex: 1 1 220px; height: 50px; padding: 0 18px; border: 0; border-radius: 99px; background: #fff; }
.nlform button { height: 50px; padding: 0 24px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; }

@media (max-width: 900px) {
  .cgrid { grid-template-columns: minmax(0, 1fr); }
  .ccard { min-height: 0; }
  .stage .scene { grid-template-columns: minmax(0, 1fr) 30%; padding: 10px; gap: 6px; }
  .stage .scene svg.art { max-width: 110px; }
}
.stage .scene:has(.fund) { grid-template-columns: minmax(0, 1fr) 22%; }
.fund { padding: 6px 8px; gap: 7px; }
.fund b { font-size: 12.500px; }
.fund span { font-size: 11px; }
.stage .note:has(.fund) { gap: 5px; }
.swap { font-size: 13px; margin: -2px 0; }
@media (max-width: 900px) {
  .nhead a, .rstrip__r a, .tinfo a, .more { display: inline-flex; align-items: center; min-height: 40px; }
  .rstrip__r { gap: 4px 18px; }
}

/* ---------- screener, zakat dashboard, goal planner, inheritance ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q { font-weight: 500; font-size: 15px; margin-top: 14px; }
.gk .q:first-of-type { margin-top: 10px; }
.money--plain { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: 18px; }
.money--plain em { font-style: normal; color: var(--muted); padding-left: 6px; }
.money input::placeholder { color: #A3A9B6; }
.fld--sel select { width: 100%; height: 48px; margin-top: 4px; border: 1.500px solid var(--line); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); }
.fld--sel select:focus { border-color: var(--ink); outline: 0; }
.xmore { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.xmore summary { cursor: pointer; font-weight: 500; font-size: 15px; list-style: none; display: flex; gap: 8px; align-items: center; }
.xmore summary::-webkit-details-marker { display: none; }
.xmore summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); transition: transform .25s var(--ease); }
.xmore[open] summary::before { transform: rotate(45deg); }
.xmore > p { color: #3C4660; font-size: 14.500px; margin-top: 8px; }
.tickbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14.500px; color: #3C4660; margin-top: 14px; cursor: pointer; line-height: 1.4; }
.tickbox input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); }
.zbars { display: grid; gap: 9px; padding: 4px 0 2px; }
.zbars:empty { display: none; }
.zbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.zbtns button { height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-weight: 500; cursor: pointer; transition: background .2s; }
.zbtns button:hover { background: rgba(255,255,255,.1); }

/* screener */
.tick { background: var(--soft); border-radius: 18px; padding: 16px 18px; margin-bottom: 22px; }
.tick label { font-weight: 600; font-size: 15px; }
.tick__row { display: flex; gap: 8px; margin-top: 6px; }
.tick__row input { flex: 1; min-width: 0; height: 46px; border: 1.500px solid var(--line); border-radius: 99px; padding: 0 16px; font-size: 16px; text-transform: uppercase; background: #fff; }
.tick__row button { height: 46px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; }
.tick__f[data-off] input, .tick__f[data-off] button { opacity: .45; cursor: not-allowed; }
.tick__note { font-size: 14px; color: #3C4660; margin-top: 8px; }
.res--scr { gap: 12px; }
.std { background: rgba(255,255,255,.06); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.std__h { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.std h3 { font-size: 20px; color: #fff; }
.std > small { display: block; color: #C9D0DF; font-size: 13px; margin-top: 1px; }
.pill { flex: none; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; }
.std--pass .pill { background: var(--gold); color: var(--ink); }
.std--fail .pill { background: #fff; color: var(--ink); }
.std ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.std li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14.500px; }
.std li small { display: block; color: #AEB6C8; font-size: 12.500px; }
.std li b { font-weight: 500; font-variant-numeric: tabular-nums; }
.m { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.m--y { background: var(--gold); color: var(--ink); }
.m--n { background: #fff; color: var(--ink); }
.m--q { border: 1px dashed rgba(255,255,255,.5); color: #C9D0DF; }
.std__why { font-size: 14px; margin-top: 6px; color: #fff; }
.std__note { display: block; font-size: 13px; color: #C9D0DF; }
.pur { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 10px; }
.pur b { color: var(--gold); font-weight: 500; }

/* zakat dashboard */
.zset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; background: var(--soft); border-radius: 18px; padding: 6px 18px 18px; margin-bottom: 20px; }
.zset .q { margin-top: 10px; }
.zset .fgrid--2, .zset .hint { grid-column: 1 / -1; }
.zset .hint { padding-top: 6px; }
.zset .money { background: #fff; }
.zset .seg { background: #fff; }
.metal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 14px; margin-top: 12px; align-items: end; }
.metal .fld small { min-height: 0; }

/* goal planner */
.addchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.addchips button { height: 36px; padding: 0 14px; border: 1.500px solid var(--line); background: #fff; border-radius: 99px; font-weight: 500; font-size: 14.500px; cursor: pointer; transition: border-color .2s, background .2s; }
.addchips button:hover { border-color: var(--ink); }
.goals { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.goal { border: 1.500px solid var(--line); border-radius: 18px; padding: 14px 16px 16px; animation: rowIn .35s var(--ease); }
.goal__top { display: flex; gap: 10px; align-items: center; }
.goal__name { flex: 1; min-width: 0; border: 0; border-bottom: 1.500px solid transparent; font: 400 24px Newsreader, serif; padding: 2px 0; background: none; }
.goal__name:focus { outline: 0; border-color: var(--ink); }
.goal__x { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.fgrid--3 .fld small { display: none; }
.goal__out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; margin-top: 12px; font-size: 14.500px; color: #3C4660; }
.goal__out b { font: 400 22px Newsreader, serif; color: var(--ink); }
.goal__out .tb { grid-column: 1 / -1; height: 6px; border-radius: 9px; background: var(--soft); overflow: hidden; margin-top: 6px; }
.goal__out .tb i { display: block; height: 100%; background: var(--lilac); transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease); border-radius: 9px; }
.gp .tool__in { gap: 2px; }

/* inheritance */
.hset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 12px; }
.hset > div[data-spouse] { display: contents; }
.hset > div[data-spouse][hidden] { display: none !important; }
.cnt { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 0 8px; }
.cnt label { font-size: 15px; font-weight: 500; }
.cnt__b { display: flex; align-items: center; gap: 4px; flex: none; }
.cnt__b button { width: 34px; height: 34px; border-radius: 50%; border: 1.500px solid var(--line); background: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: border-color .2s; }
.cnt__b button:hover { border-color: var(--ink); }
.cnt__b input { width: 40px; height: 34px; border: 0; text-align: center; font: 500 17px "Schibsted Grotesk", sans-serif; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cnt__b input::-webkit-inner-spin-button, .cnt__b input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tickbox--h { margin-top: 0; border-bottom: 1px solid var(--line); padding: 8px 0 12px; font-size: 15px; font-weight: 500; color: var(--ink); align-items: center; }
.itab { width: 100%; border-collapse: collapse; font-size: 14.500px; }
.itab th, .itab td { text-align: left; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.14); vertical-align: top; font-weight: 400; }
.itab thead th { color: #AEB6C8; font-size: 12.500px; font-weight: 500; padding-top: 0; }
.itab td { text-align: right; font-variant-numeric: tabular-nums; padding-left: 10px; white-space: nowrap; }
.itab thead th:not(:first-child) { text-align: right; }
.itab td small { display: block; color: #AEB6C8; font-size: 12.500px; }
.itab tbody th { font-weight: 500; }
.iwarn { font-size: 14px; line-height: 1.4; background: rgba(255,224,138,.16); border-radius: 12px; padding: 10px 12px; }
.isteps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 0; max-width: 820px; }
.isteps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.isteps li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; font-weight: 600; }
.isteps h3 { font-size: 22px; }
.isteps div { color: #3C4660; font-size: 15.500px; }
.isteps ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.isteps p + p { margin-top: 6px; }

/* contract model labels */
.acc2 .acct small.mdl { color: var(--ink); opacity: .75; }
.prov .model { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14.500px; color: var(--ink); margin: 2px 0 4px; }
.prov .model span { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.prov .model a { margin: 0; font-size: 13.500px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

@media (max-width: 900px) {
  .zset { grid-template-columns: minmax(0, 1fr); }
  .hset { grid-template-columns: minmax(0, 1fr); }
  .fgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid--3 .fld:last-child { grid-column: 1 / -1; }
  .res--scr { order: 0; }
  .res--inh { order: 0; }
}
@media (max-width: 420px) { .metal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .seg { flex-wrap: wrap; border-radius: 18px; } .seg button { padding: 0 12px; } }
@media (min-width: 901px) { .res--scr, .res--inh { max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
.zbars .bk { grid-template-columns: minmax(0, 1fr) auto; }
.minibar { display: none; }
@media (max-width: 900px) {
  .zd .res, .gp .res { order: 0; }
  .minibar { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 16px; padding: 10px 10px 10px 16px; box-shadow: 0 10px 30px rgba(20,33,61,.28); transform: translateY(calc(100% + 24px)); transition: transform .35s var(--ease); }
  .minibar.on { transform: none; }
  .minibar span { font-size: 13.500px; color: #C9D0DF; }
  .minibar b { font: 400 24px/1 Newsreader, serif; color: var(--gold); margin-right: auto; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; }
  .minibar button { height: 38px; padding: 0 14px; border: 0; border-radius: 99px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .minibar { transition: none; } }
.minibar span, .minibar button { white-space: nowrap; }

.ttabs { display: inline-flex; gap: 4px; background: var(--soft); border-radius: 99px; padding: 4px; margin-bottom: 22px; max-width: 100%; overflow-x: auto; }
.ttabs button { height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: none; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ttabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.addchips--more { margin: 4px 0 20px; }
.addchips--more:not(:has(button:not([hidden]))) { display: none; }
.gk h2 { margin-bottom: 2px; }
@media (max-width: 600px) { .ttabs { display: flex; width: 100%; } .ttabs button { flex: 1; padding: 0 10px; font-size: 14.500px; } }
/* typewriter words */
.flip.typing { transition: none; }
.flip::after { content: ""; position: absolute; right: .08em; top: .16em; bottom: .14em; width: 2px; border-radius: 2px; background: currentColor; opacity: 0; }
.flip.typing::after { opacity: 1; animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.flip span { transition: none; }

/* ---------- phones: more room to read ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; line-height: 1.6; }
  p, li { line-height: 1.6; }
  h1 { line-height: 1.12; letter-spacing: -.012em; }
  h2, h3 { line-height: 1.22; letter-spacing: -.01em; }
  .band h1 { line-height: 1.12; }
  .rowpost h3 { line-height: 1.25; }
  .body p + p, .body ul, .body ol { margin-top: .9em; }
  .body h2 { margin-top: 1.6em; }
  .wrap { width: min(100% - 36px, 1240px); }
  .acc2 .acct small, .est small, .tg, .mdl, .go, .note small, .fine { font-size: 13.5px !important; line-height: 1.4; }
  .acc2 { padding-block: 14px; row-gap: 6px; }
  .rail { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .rail::-webkit-scrollbar { display: none; }
  .rail button { flex: 0 0 auto; min-width: 84px; padding: 0 12px; font-size: 13px; scroll-snap-align: start; }
  .lines > div, .bk { font-size: 15px; }
  .fld small { font-size: 13.5px; }
  .tool__out small, .res small { font-size: 14px; }
  .faq2 summary { font-size: 20px; line-height: 1.25; }
  .faq2 details p { font-size: 16.5px; }
}

/* email me these results */
.mailme { border-top: 1px solid rgba(255,255,255,.16); padding-top: 12px; }
.mailme__b { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 14.500px; cursor: pointer; }
.mailme__b svg { width: 18px; height: 18px; --a: var(--ink); }
.mailme__f { display: grid; gap: 6px; margin-top: 12px; }
.mailme__f label { font-size: 14px; font-weight: 500; }
.mailme__row { display: flex; gap: 6px; }
.mailme__row input { flex: 1; min-width: 0; height: 44px; border-radius: 99px; border: 0; padding: 0 16px; font-size: 16px; color: var(--ink); }
.mailme__row button { height: 44px; padding: 0 18px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4); background: none; color: #fff; font-weight: 600; cursor: pointer; }
.mailme__row button:disabled { opacity: .6; }
.mailme small { color: #C9D0DF; font-size: 13px; line-height: 1.4; }
.mailme small a { text-decoration: underline; }
.mailme__msg { font-size: 14px; }
.mailme__msg:empty { display: none; }

/* glossary and FAQs */
.glhead { display: grid; gap: 14px; padding-top: 26px; }
.glhead .finder { max-width: 420px; }
.pills--wrap { flex-wrap: wrap; height: auto; }
.azbar a.off { opacity: .3; pointer-events: none; }
.term { scroll-margin-top: 130px; }
.term .aka { display: block; color: var(--muted); font-size: 13.500px; font-style: italic; margin-top: 1px; }
.term__f { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 13.500px; }
.term__f span { color: var(--muted); }
.term__f a { font-weight: 600; }
.term.flash { animation: termflash 2.4s var(--ease); border-radius: 12px; }
@keyframes termflash { 0%, 40% { background: var(--gold); } 100% { background: transparent; } }
.faqnav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 26px; }
.faqnav a { padding: 7px 14px; border: 1.500px solid var(--line); border-radius: 99px; font-weight: 500; font-size: 14.500px; transition: border-color .2s; }
.faqnav a:hover { border-color: var(--ink); }
.faqgrp { scroll-margin-top: 90px; }
.faq2 details { scroll-margin-top: 90px; }
.band.ink .band__art svg { --a: var(--c, var(--gold)); }

/* provider cards on compare pages */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.pcard { border: 1.500px solid var(--line); border-radius: 20px; padding: 18px 20px 20px; display: grid; gap: 10px; align-content: start; }
.pcard__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pcard h3 { font-size: 26px; }
.pcard .role { font-size: 13px; font-weight: 600; background: var(--soft); border-radius: 99px; padding: 3px 10px; }
.pcard dl { margin: 0; display: grid; gap: 8px; }
.pcard dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; font-size: 15px; border-top: 1px solid var(--line); padding-top: 8px; }
.pcard dt { color: var(--muted); font-size: 13.500px; font-weight: 500; }
.pcard dd { margin: 0; }
.pcard > p { color: #3C4660; font-size: 15px; }
.go2 { font-weight: 600; font-size: 15px; }
@media (max-width: 480px) { .pcard dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- article and news pages: editorial header ---------- */
.ahead { max-width: 900px; padding: 34px 0 26px; border-bottom: 1px solid var(--line); position: relative; }
.ahead::before { content: ""; display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--c); margin-bottom: 18px; }
.ahead .crumb { margin-bottom: 12px; }
.kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.kicker span:first-child { color: var(--ink); }
.kicker span + span::before { content: "·"; margin-right: 14px; color: var(--line); }
.ahead h1 { font-size: clamp(36px, 4.600vw, 60px); line-height: 1.05; letter-spacing: -.025em; max-width: 20ch; }
.ahead .stand { font: 400 clamp(19px, 1.800vw, 23px)/1.45 Newsreader, Georgia, serif; color: #3C4660; margin-top: 14px; max-width: 46ch; }
.ahead .bylines { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.ahead .disc { color: var(--muted); }
.lcol { display: grid; gap: 22px; align-content: start; position: sticky; top: 90px; }
.lcol .toc { position: static; }
.series { font-size: 14px; }
.series b { display: block; font-size: 12.500px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.series ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
.series li { counter-increment: s; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 6px 8px; border-radius: 10px; line-height: 1.35; }
.series li::before { content: counter(s); color: var(--muted); font-variant-numeric: tabular-nums; }
.series li[aria-current] { background: var(--soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--c); }
.series a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); margin: 6px 0 28px; }
.kfacts div { padding: 14px 16px 14px 0; display: grid; gap: 4px; align-content: start; }
.kfacts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.kfacts b { font: 400 clamp(28px, 3vw, 38px)/1 Newsreader, Georgia, serif; letter-spacing: -.02em; box-shadow: inset 0 -.28em 0 var(--c); justify-self: start; }
.kfacts span { font-size: 14px; color: #3C4660; line-height: 1.4; }
.aside .next { background: #fff; border: 1.500px solid var(--line); color: var(--ink); }
.aside .next svg.g { width: 34px; height: 34px; --a: var(--ink); color: var(--c); }
.aside .next:hover { border-color: var(--ink); }
@media (max-width: 900px) {
  .lcol { position: static; }
  .lcol .series { display: none; }
  .kfacts { grid-template-columns: minmax(0, 1fr); }
  .kfacts div, .kfacts div + div { padding: 12px 0; border-left: 0; }
  .kfacts div + div { border-top: 1px solid var(--line); }
  .ahead { padding-top: 22px; }
}

/* ---------- front page panels: the figures are the picture ---------- */
.stage .scene { grid-template-columns: minmax(0, 1fr) !important; align-items: center; justify-items: center; padding: 22px; }
.stage .scene svg.art { display: none; }
.stage .scene .note { width: min(100%, 420px) !important; padding: 18px 20px 16px; font-size: 14.500px; gap: 9px; border-radius: 18px; box-shadow: 0 22px 44px -26px rgba(20,33,61,.6); }
.note__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stage .note .note__h small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.note__h svg.g { width: 26px; height: 26px; flex: none; color: var(--ink); --a: var(--c); }
.stage .note .fine, .stage .note p { display: block !important; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; line-height: 1.4; }
.stage .note .mini { gap: 10px; }
.stage .note .mini img { height: 22px; }
.stage .note .chip { display: inline-flex !important; }
.stage .note .big2 { font-size: 34px; }
@media (max-width: 900px) {
  .stage { min-height: 0; }
  .stage .scene { padding: 14px; }
  .stage .scene .note { width: 100% !important; padding: 16px 16px 14px; font-size: 14px; }
}
/* keep every panel card inside its panel */
.stage .scene { padding: 16px; }
.stage .note .minichart { width: 100%; height: 64px; }
.stage .note .big2 { font-size: 28px; line-height: 1.05; }
.stage .note .ckey { font-size: 12.500px; }
.stage .scene .note { gap: 7px; padding: 15px 18px 13px; max-height: 100%; }
@media (max-width: 900px) { .stage { height: 280px !important; min-height: 280px !important; } }
@media (max-width: 480px) { .stage { height: 330px !important; min-height: 330px !important; } .stage .scene .note { padding: 13px 14px 11px; } }

/* front page: questions people ask */
.pq { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
.pq__h { font-size: 26px; margin-bottom: 14px; }
.pq__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pq__c { display: grid; gap: 6px; align-content: start; padding: 16px 16px 14px; border: 1.500px solid var(--line); border-radius: 16px; transition: border-color .2s; }
.pq__c:hover { border-color: var(--ink); }
.pq__c small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pq__c b { font: 400 21px/1.2 Newsreader, Georgia, serif; }
.pq__c span { font-size: 14.500px; color: #3C4660; line-height: 1.45; }
.pq__c em { font-style: normal; font-weight: 600; font-size: 14px; margin-top: 4px; }
@media (max-width: 1000px) { .pq__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pq__g { grid-template-columns: minmax(0, 1fr); } }
.pupd { color: var(--muted); font-size: 14px; margin-top: 18px; }
.plainpage { max-width: 820px; }
.plainpage .tablewrap table { font-size: 15px; }
.plainpage .tablewrap td, .plainpage .tablewrap th { vertical-align: top; }

/* article photo under the byline */
.ahero { margin: 22px 0 6px; max-width: 1100px; }
.ahero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: var(--soft); }
.ahero figcaption { font-size: 12.500px; color: var(--muted); margin-top: 6px; }
.ahero figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.cover:not(.tcover) img { width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal; }
@media (max-width: 640px) { .ahero { margin-top: 16px; } .ahero img { border-radius: 14px; } }

/* photo thumbnails in lists */
.thumb--photo { background: var(--soft) !important; }
.thumb--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.rowpost:hover .thumb--photo img, .nitem:hover .thumb--photo img { transform: scale(1.04); }
.rowpost .thumb.thumb--photo { width: 120px; height: 76px; }
.rail2 .rowpost .thumb.thumb--photo { width: 72px; height: 48px; }
@media (max-width: 640px) { .rowpost .thumb.thumb--photo { width: 96px; height: 64px; } }
.rowpost, .rail2 .rowpost { grid-template-columns: auto minmax(0, 1fr) !important; }
/* front page: Latest box fits two stories, and photos read properly */
.side1 .nitem { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 12px; padding: 9px 0; align-items: start; }
.side1 .nitem .thumb { width: 72px !important; height: 54px !important; border-radius: 10px; }
.side1 .nitem .nt { font-size: 16.500px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side1 .nitem .nd { display: none; }
.homeblog .lead .cover { height: auto !important; aspect-ratio: 16 / 9; }
.homeblog .lead .cover img { height: 100%; }