/* Homepage only. Shared classes and tokens live in site.css. */
/* Hero: snow caps above a drifting cloud sea, sticker headline.
   Final layout (default, and after the explainer): copy left, MacBook right, all above the fold.
   Intro layout (html.sx-intro, set before paint when the explainer will autoplay): centred copy;
   the explainer slides the MacBook in from the left, then settles into the final layout. */
.home-hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
/* Large monitors: the hero grows as if the approved 1440x900 design were zoomed to fit (1px at 1440x900
   and below, up to 1.45px), so the copy and the MacBook fill the screen instead of floating in empty sky. */
.home-hero { --hu: clamp(1px, min(100vw / 1440, 100vh / 900), 1.45px); }
.home-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.home-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
/* Two tiles wide (each tile = one viewport wide, 3:1), tall enough to hold a whole tile so its top
   never clips; the strip's clouds sit in its lower part, the rest is transparent. */
.home-drift { position: absolute; left: 0; bottom: -2vw; width: 200%; height: 34vw; background: url(/assets/img/cloud-drift.webp) 0 100% / 50% auto repeat-x; animation: home-drift 150s linear infinite; will-change: transform; }
@keyframes home-drift { to { transform: translate3d(-50%, 0, 0); } }
.home-hero > .site-header { position: relative; z-index: 30; }
.home-hero-inner { position: relative; flex: 1; width: 100%; max-width: calc(1480 * var(--hu)); margin: 0 auto; box-sizing: border-box; padding: clamp(24px, 4vw, calc(48 * var(--hu))) clamp(20px, 4vw, calc(56 * var(--hu))) clamp(64px, 8vw, calc(96 * var(--hu))); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, calc(64 * var(--hu))); align-items: center; }
.home-hero-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.home-h1 { margin: 0; display: flex; flex-direction: column; align-items: inherit; gap: .14em; font-size: clamp(44px, 4.7vw, calc(76 * var(--hu))); }
.home-h1-line { display: block; }
.home-h1-sticker { display: inline-flex; align-items: center; gap: .17em; background: #FFFFFF; border-radius: .24em; padding: .04em .26em .12em .22em; transform: rotate(-3deg); box-shadow: 0 6px 0 rgba(11,36,64,.16), 0 18px 40px rgba(11,36,64,.22); }
.home-rec-dot { width: .52em; height: .52em; flex: none; border-radius: 50%; background: var(--rec, #FF4A2E); box-shadow: inset -.06em -.08em 0 rgba(0,0,0,.12), inset .08em .08em 0 rgba(255,255,255,.18); }
.home-lede { margin: calc(30 * var(--hu)) 0 0; max-width: 33ch; font-size: calc(20 * var(--hu)); line-height: 1.45; font-weight: 600; font-family: var(--display); color: var(--navy, #0B2440); background: rgba(255,255,255,.84); padding: calc(12 * var(--hu)) calc(18 * var(--hu)); border-radius: calc(18 * var(--hu)); }
.home-perks { display: flex; flex-wrap: wrap; gap: calc(12 * var(--hu)); margin: calc(22 * var(--hu)) 0 0; padding: 0; list-style: none; justify-content: flex-start; }
.home-perk { font-family: var(--display); font-weight: 800; font-size: calc(17 * var(--hu)); letter-spacing: -.01em; line-height: 1; color: var(--navy, #0B2440); background: #fff; padding: calc(8 * var(--hu)) calc(15 * var(--hu)); border-radius: calc(12 * var(--hu)); box-shadow: 0 4px 0 rgba(11,36,64,.16), 0 10px 24px rgba(11,36,64,.16); rotate: 1.5deg; }
.home-perk a { color: inherit; text-decoration: none; }
.home-perk-free { background: var(--sun, #FFD84D); rotate: -2deg; }
.home-perk-4k { background: var(--navy, #0B2440); color: #fff; rotate: -1deg; }
.home-perk-e2e { background: var(--accent, #1E66B8); color: #fff; rotate: 2deg; }
.home-perk-e2e a { display: inline-flex; align-items: center; gap: calc(7 * var(--hu)); }
.home-perk-lock { width: calc(12 * var(--hu)); height: calc(14 * var(--hu)); flex: none; }
.home-cta { display: flex; flex-wrap: wrap; gap: calc(18 * var(--hu, 1px)); justify-content: flex-start; align-items: center; margin-top: calc(28 * var(--hu, 1px)); }
.home-cta .btn { gap: calc(10 * var(--hu, 1px)); padding: calc(16 * var(--hu, 1px)) calc(26 * var(--hu, 1px)); border-radius: calc(18 * var(--hu, 1px)); font-size: calc(18 * var(--hu, 1px)); }
.home-cta .btn svg { width: calc(18 * var(--hu, 1px)); height: auto; }
.home-cta-left { justify-content: flex-start; }
.home-sub { margin: calc(22 * var(--hu)) 0 0; font-size: calc(15 * var(--hu)); font-weight: 600; font-family: var(--display); color: var(--navy, #0B2440); background: rgba(255,255,255,.84); padding: calc(7 * var(--hu)) calc(14 * var(--hu)); border-radius: 999px; transform: rotate(1deg); }
.home-note { margin: calc(14 * var(--hu, 1px)) 0 0; font-size: calc(14 * var(--hu, 1px)); font-weight: 600; font-family: var(--display); color: var(--navy, #0B2440); text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.9); }
.btn-tilt-r { rotate: 1.5deg; }
/* Three hero buttons (Download for Mac, Record, Add to Chrome) stay on one row on desktop. */
@media (min-width: 1101px) {
  .home-cta { flex-wrap: nowrap; gap: calc(14 * var(--hu, 1px)); }
  .home-cta .btn { padding: calc(14 * var(--hu, 1px)) calc(20 * var(--hu, 1px)); font-size: calc(17 * var(--hu, 1px)); white-space: nowrap; }
  .home-cta .btn svg, .home-cta .btn .home-rec-dot { flex-shrink: 0; }
}
/* Laptop-size screens: give the copy half the width and slim the buttons so all three still fit
   beside the MacBook; below ~1250px Add to Chrome wraps under the other two. */
@media (min-width: 1101px) and (max-width: 1400px) {
  .home-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-cta { gap: 12px; }
  .home-cta .btn { padding: 12px 16px; font-size: 16px; gap: 8px; }
}
@media (min-width: 1101px) and (max-width: 1250px) { .home-cta { flex-wrap: wrap; } }
/* Chrome extensions don't run on phones and tablets. */
@media (hover: none) and (pointer: coarse) { .home-cta .btn-chrome { display: none !important; } }
.home-cta .btn .chrome-ico { width: 1.15em; height: 1.15em; margin: 0; vertical-align: 0; }
html.no-gdm .rec-yes, .rec-no { display: none; }
html.no-gdm .btn.rec-no { display: inline-flex; }
.home-hero .sx-stage { width: 100%; max-width: none; margin: 0; }

/* Intro layout: centred, as in the approved design. The stage waits off screen for the explainer. */
html.sx-intro .home-hero-inner { display: flex; flex-direction: column; align-items: center; }
html.sx-intro .home-hero-copy { align-items: center; text-align: center; margin-top: clamp(16px, 4vh, calc(56 * var(--hu))); }
html.sx-intro .home-h1 { align-items: center; font-size: clamp(60px, 7.4vw, calc(108 * var(--hu))); }
html.sx-intro .home-cta, html.sx-intro .home-perks { justify-content: center; }
html.sx-intro .home-lede { font-size: calc(21 * var(--hu)); }
html.sx-intro .home-hero .sx-stage { position: absolute; left: 0; top: 0; width: min(1100px, 92vw); visibility: hidden; }

@media (max-width: 1100px) {
  .home-hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .home-hero-copy { align-items: center; text-align: center; }
  .home-h1 { align-items: center; font-size: clamp(44px, 9vw, 84px); }
  .home-cta, .home-perks { justify-content: center; }
}
@media (max-width: 640px) {
  .home-lede { font-size: 17px; }
  .home-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .home-cta .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .home-drift { animation: none; } }

.home-section { padding: 112px 0 96px; }
.home-section-features { padding: 0 0 112px; }
.home-h2 { margin: 0 auto 56px; max-width: 24ch; text-wrap: balance; text-align: center; font-size: clamp(40px, 5vw, 68px); line-height: 1; }
/* How it works: three illustrated steps */
.hw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.hw-step { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: 30px; padding: 12px 12px 30px; box-shadow: 0 6px 0 rgba(11,36,64,.08), 0 26px 60px rgba(11,36,64,.11); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.hw-step-1 { transform: rotate(-1.4deg); }
.hw-step-2 { transform: translateY(28px) rotate(.9deg); }
.hw-step-3 { transform: rotate(-.7deg); }
.hw-step:hover { transform: translateY(-8px) rotate(0deg); box-shadow: 0 8px 0 rgba(11,36,64,.1), 0 34px 70px rgba(11,36,64,.16); }
.hw-step-2:hover { transform: translateY(20px) rotate(0deg); }
.hw-art { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #EAF3FC, #CFE4F8); }
.hw-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hw-step:hover .hw-art img { transform: scale(1.04); }
.hw-num { position: absolute; top: -16px; left: -12px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: #fff; color: var(--navy); font: 800 27px/1 var(--display); border: 3px solid var(--navy); box-shadow: 0 5px 0 var(--navy); transform: rotate(-9deg); }
.hw-step-1 .hw-num { background: var(--rec); color: #fff; }
.hw-step-2 .hw-num { transform: rotate(7deg); }
.hw-step-3 .hw-num { background: var(--sun); }
.hw-step h3 { margin: 24px 16px 6px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--navy); }
.hw-step p { margin: 0 16px; font-size: 17px; line-height: 1.55; color: var(--body); }
/* dashed hand-drawn arrows between the cards (wide screens only) */
.hw-step-1::after, .hw-step-2::after { content: ""; position: absolute; z-index: 1; top: 34%; right: -46px; width: 60px; height: 40px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' fill='none' stroke='%230B2440' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 28C18 6 38 4 52 16' stroke-dasharray='2 7'/%3E%3Cpath d='M44 9l9 7-11 3'/%3E%3C/svg%3E"); opacity: .55; pointer-events: none; }
.hw-step-2::after { top: 44%; transform: scaleY(-1); }

/* Features: sticker icon cards */
.ft-head { margin: 0 auto 44px; max-width: 22ch; text-align: center; text-wrap: balance; font-size: clamp(32px, 3.6vw, 48px); line-height: 1; }
.ft-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 10px 40px rgba(11,36,64,.06); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.ft-card:hover { transform: translateY(-4px); box-shadow: 0 6px 0 rgba(11,36,64,.06), 0 22px 50px rgba(11,36,64,.12); }
.ft-icon { width: 80px; height: 80px; margin: -4px 0 6px -4px; border-radius: 22px; overflow: hidden; background: #EAF3FC; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ft-icon img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); }
.ft-card:hover .ft-icon { transform: rotate(-6deg) scale(1.06); }
.ft-card h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.ft-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.ft-card-dark { background: var(--navy); border-color: var(--navy); box-shadow: 0 6px 0 rgba(11,36,64,.25), 0 24px 50px rgba(11,36,64,.25); }
.ft-card-dark h3 { color: #fff; }
.ft-card-dark p { color: #C9DCF0; }
.ft-card-dark a { color: var(--sun); }
.ft-card-dark .ft-icon { background: #EAF3FC; }

@media (max-width: 1000px) {
  .hw-steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; gap: 44px; }
  .hw-step-1 { transform: rotate(-1deg); }
  .hw-step-2 { transform: rotate(1deg); }
  .hw-step-3 { transform: rotate(-.5deg); }
  .hw-step:hover, .hw-step-2:hover { transform: translateY(-4px) rotate(0deg); }
  .hw-step-1::after, .hw-step-2::after { display: none; }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ft-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px; }
  .ft-icon { grid-row: span 2; width: 64px; height: 64px; margin: 0; border-radius: 18px; }
  .hw-num { left: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-step, .hw-art img, .ft-card, .ft-icon { transition: none; }
  .hw-step:hover, .ft-card:hover, .ft-card:hover .ft-icon, .hw-step:hover .hw-art img { transform: none; }
}

.home-close { position: relative; overflow: hidden; min-height: 620px; display: flex; align-items: center; padding: 96px 0; }
.home-close-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.home-close > .wrap { position: relative; width: 100%; display: flex; }
.home-close-card { max-width: 480px; background: rgba(255,255,255,.9); border-radius: 26px; padding: clamp(24px, 5vw, 40px); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 6px 0 rgba(11,36,64,.14), 0 24px 60px rgba(11,36,64,.2); transform: rotate(-1deg); }
.home-close-card h2 { margin: 0; font-size: clamp(40px, 4.6vw, 64px); }
.home-close-card p { margin: 0; line-height: 1.55; color: var(--body); }
.home-close-card .home-small { font-size: 15px; color: var(--muted); }
.home-msg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 600px) {
  .home-section { padding: 72px 0 64px; }
  .home-section-features { padding-bottom: 72px; }
}
.home-main { padding: 0; }

/* Download picker: Apple Silicon or Intel */
.dl-pick { position: relative; display: inline-block; }
.dl-pick > summary { list-style: none; cursor: pointer; user-select: none; }
.dl-pick > summary::-webkit-details-marker { display: none; }
.dl-chev { margin-left: 2px; transition: transform .2s ease; }
.dl-pick[open] .dl-chev { transform: rotate(180deg); }
.dl-menu { position: absolute; z-index: 40; top: calc(100% + 14px); left: 0; min-width: 290px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: #fff; border: 3px solid var(--navy); border-radius: 18px; box-shadow: 0 6px 0 var(--navy), 0 24px 50px rgba(11,36,64,.18); text-align: left; animation: dl-pop .16s ease-out; }
.dl-pick.dl-up .dl-menu { top: auto; bottom: calc(100% + 14px); animation-name: dl-pop-up; }
@keyframes dl-pop-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dl-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dl-menu a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; color: var(--navy); text-decoration: none; }
.dl-menu a b { font: 700 18px/1.2 var(--display); }
.dl-menu a span { font-size: 14px; color: var(--muted); }
.dl-menu a:hover, .dl-menu a:focus-visible { background: var(--soft); outline: none; }
.dl-menu a.is-rec b::after { content: "Recommended"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--sun); color: var(--navy); font: 700 12px/1.6 var(--sans); vertical-align: 2px; }
.dl-menu .dl-help { padding: 8px 14px 6px; font-size: 14px; color: var(--accent); text-decoration: underline; flex-direction: row; }
@media (max-width: 640px) {
  .home-cta .dl-pick { width: 100%; }
  .home-cta .dl-pick > summary { justify-content: center; width: 100%; box-sizing: border-box; }
  .dl-menu { left: 0; right: 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .dl-menu { animation: none; } .dl-chev { transition: none; } }

/* End-to-end encryption section */
.e2 { padding-top: 0; }
.e2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.e2-tag { rotate: -2deg; margin-bottom: 18px; font-size: 15px; padding: 6px 14px; }
.e2-h2 { margin: 0; max-width: 17ch; text-wrap: balance; font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.e2-lede { margin: 20px 0 0; max-width: 52ch; font-size: 19px; line-height: 1.55; color: var(--ink); }
.e2-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 54ch; }
.e2-points li { position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.55; color: var(--body); }
.e2-points li::before { content: ""; position: absolute; left: 0; top: .42em; width: 16px; height: 16px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--navy); }
.e2-points b, .e2-trade b { color: var(--navy); font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.e2 code { font: 600 .92em ui-monospace, "SF Mono", Menlo, monospace; background: var(--soft); color: var(--navy); padding: 1px 6px; border-radius: 6px; }
.e2-trade { margin: 24px 0 0; max-width: 54ch; padding: 14px 18px; font-size: 15px; line-height: 1.55; color: var(--muted); background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 18px; }
.e2-art { margin: 0; }
.e2-card { background: var(--card); border-radius: 30px; padding: 18px; box-shadow: 0 6px 0 rgba(11,36,64,.08), 0 26px 60px rgba(11,36,64,.11); rotate: 1.2deg; display: grid; gap: 16px; }
.e2-bar { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 16px; background: var(--bg); border: 3px solid var(--navy); border-radius: 999px; box-shadow: 0 4px 0 var(--navy); color: var(--navy); }
.e2-lock { flex: none; }
.e2-url { min-width: 0; font: 600 clamp(13px, 1.5vw, 17px)/1.3 ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
.e2-url-key { background: var(--sun); border-radius: 6px; padding: 2px 5px; margin-left: 1px; box-shadow: 0 0 0 2px var(--navy); }
.e2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.e2-side { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--bg); font-size: 14.5px; line-height: 1.4; color: var(--body); }
.e2-side b { font: 700 15px/1.25 ui-monospace, "SF Mono", Menlo, monospace; color: var(--navy); overflow-wrap: anywhere; }
.e2-side-key { background: #FFF3C2; }
.e2-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-bottom: 4px; }
.e2-side-key .e2-dot { background: var(--sun); border: 2.5px solid var(--navy); width: 14px; height: 14px; }
.e2-static { position: relative; border-radius: 18px; overflow: hidden; background: #CFE4F8; line-height: 0; }
.e2-static svg { display: block; opacity: .8; }
.e2-static span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: calc(100% - 24px); text-align: center; line-height: 1.3; background: #fff; color: var(--navy); font: 700 15px/1.3 var(--display); padding: 8px 14px; border-radius: 12px; box-shadow: 0 4px 0 rgba(11,36,64,.2); }
@media (max-width: 900px) {
  .e2-grid { grid-template-columns: minmax(0, 1fr); }
  .e2-art { max-width: 560px; }
}
@media (max-width: 480px) {
  .e2-split { grid-template-columns: minmax(0, 1fr); }
  .e2-lede { font-size: 17px; }
  .e2-card { padding: 14px; }
}

/* Free + no limits section (mirrors the encryption section: card left, text right) */
.nl-tag { rotate: 2deg; }
.nl-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.nl-art { order: -1; }
.nl-card { rotate: -1.2deg; gap: 14px; }
.nl-timer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 18px 20px; background: var(--navy); color: #fff; border-radius: 20px; }
.nl-rec { display: inline-flex; align-items: center; gap: 8px; font: 800 14px/1 var(--display); letter-spacing: .08em; }
.nl-rec i { width: 12px; height: 12px; border-radius: 50%; background: var(--rec); animation: nl-pulse 1.4s ease-in-out infinite; }
@keyframes nl-pulse { 50% { opacity: .35; } }
.nl-time { font: 700 clamp(34px, 4.4vw, 52px)/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nl-inf { margin-left: auto; rotate: -3deg; font-size: 14px; padding: 5px 12px; }
.nl-inf span { font-size: 1.15em; }
.nl-q { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; background: var(--bg); border-radius: 18px; }
.nl-label { font: 800 15px/1 var(--display); color: var(--navy); }
.nl-opts { display: inline-flex; gap: 8px; }
.nl-opt { font: 700 15px/1 var(--display); color: var(--muted); background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 8px 14px; }
.nl-opt-on { color: var(--navy); background: var(--sun); border: 3px solid var(--navy); box-shadow: 0 3px 0 var(--navy); padding: 7px 18px; font-size: 18px; }
.nl-team { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 14px 16px; background: #FFF3C2; border-radius: 18px; }
.nl-avs { display: inline-flex; }
.nl-avs i { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; border: 3px solid var(--navy); color: #fff; font: 800 16px/34px var(--display); text-align: center; font-style: normal; }
.nl-avs i:first-child { margin-left: 0; }
.nl-invite { font: 800 15px/1 var(--display); color: var(--navy); background: #fff; border: 3px dashed var(--navy); border-radius: 999px; padding: 9px 14px; }
@media (prefers-reduced-motion: reduce) { .nl-rec i { animation: none; } }
@media (max-width: 900px) {
  .nl-grid { grid-template-columns: minmax(0, 1fr); }
  .nl-art { order: 0; }
}
@media (max-width: 480px) {
  .nl-card { padding: 14px; }
  .nl-timer { padding: 14px; }
  .nl-inf { margin-left: 0; }
  .nl-opt { padding: 7px 11px; }
  .nl-opt-on { padding: 6px 15px; }
}