/* "Make it your own" — two ranked levels side by side (I Essential on paper, II Advanced in ink),
   identical structure so the difference reads at a glance, then two quiet "beyond the screen" tiles.
   Restrained: hairlines, one typeface, generous air, a single accent. */
.levels{--lv-ink:#161514;--lv-paper:#f7f5f0;--lv-hair:#1615141f;--lv-mute:#8b867e;padding:8px 0 24px}
.lv-label{display:flex;align-items:center;gap:22px;margin:0 0 26px;font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--lv-mute)}
.lv-rule{flex:1;height:1px;background:var(--lv-hair)}
.lv-label-beyond{margin-top:88px}

.lv-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--lv-hair)}
.lv{position:relative;display:flex;flex-direction:column;padding:44px 48px 46px;color:var(--lv-ink);text-decoration:none;background:var(--lv-paper);transition:background .4s}
.lv:focus-visible{outline:2px solid var(--lv-ink);outline-offset:-6px}
.lv-advanced{background:var(--lv-ink);color:#f3efe8}
.lv-advanced:focus-visible{outline-color:#f3efe8}

.lv-head{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12.5px;letter-spacing:.02em}
.lv-level{display:inline-flex;align-items:center;gap:12px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.lv-meter{display:inline-flex;gap:4px}
.lv-meter i{width:18px;height:2px;background:currentColor;opacity:.22}
.lv-meter i.on{opacity:1}
.lv-prod{color:var(--lv-mute)}
.lv-advanced .lv-prod{color:#a69f95}
.lv-name{margin:30px 0 0;font-size:clamp(48px,5.6vw,88px);font-weight:400;letter-spacing:-.055em;line-height:.95}
.lv-advanced .lv-name{color:#fffaf2}

.lv-visual{position:relative;margin:34px 0 0;aspect-ratio:5/4;overflow:hidden;background:#f2efea}
.lv-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1s ease,transform 5s ease}
.lv-visual>img.on{opacity:1;transform:scale(1)}
.lv-essential .lv-visual>img{object-position:50% 60%}
.lv-advanced .lv-visual{background:#f3f1f2}
.lv-advanced .lv-visual>img{object-fit:contain;object-position:50% 50%}
.lv-visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:11.5px;letter-spacing:.04em;color:#5f5a53;background:linear-gradient(transparent,#f2efeacc)}
.lv-visual figcaption:empty{display:none}

.lv-line{margin:28px 0 0;font-size:clamp(19px,1.6vw,23px);line-height:1.3;letter-spacing:-.02em;max-width:420px}
.lv-looks{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:14px 0 0;padding:0;font-size:12.5px;color:#8f887e}
.lv-looks li{position:relative;padding-bottom:3px;transition:color .4s}
.lv-looks li.on{color:#fffaf2}
.lv-looks li:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .6s ease}
.lv-looks li.on:after{right:0}

.lv-feats{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--lv-hair)}
.lv-advanced .lv-feats{border-color:#ffffff1f}
.lv-feats li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--lv-hair);font-size:14px}
.lv-advanced .lv-feats li{border-color:#ffffff1f}
.lv-feats li.off{color:#b3ada4}
.lv-mark{display:inline-flex;flex:none;width:16px;height:16px}
.lv-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lv-feats li.on .lv-mark{color:#bf4c34}
.lv-advanced .lv-feats li.on .lv-mark{color:#e07a62}

.lv-cta{display:inline-flex;align-items:center;align-self:flex-start;gap:22px;margin-top:38px;padding:15px 0 13px;border-bottom:1px solid currentColor;font-size:14px;letter-spacing:.01em}
.lv-cta svg,.by-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lv:hover .lv-cta svg,.by:hover .by-cta svg{transform:translateX(5px)}
.lv-advanced .lv-cta{border:0;padding:16px 22px;background:#fffaf2;color:var(--lv-ink)}
.lv-advanced:hover .lv-cta{background:#bf4c34;color:#fffaf2}
.lv-essential:hover{background:#f2efe8}

/* beyond the screen */
.beyond{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.by{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end;color:var(--lv-ink);text-decoration:none}
.by-visual{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#ebe7df}
.by-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.by:hover .by-visual img{transform:scale(1.035)}
.by-ar .by-visual{background:#efece5}
.by-disc{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;background:#bf4c34;left:-8%;top:18%}
.by-ar .by-visual img{inset:auto;left:20%;top:15%;width:62%;height:auto;border:6px solid var(--lv-ink);border-radius:26px;background:var(--lv-ink);transform:rotate(-6deg);box-shadow:0 24px 40px -16px #0005}
.by-ar:hover .by-visual img{transform:rotate(-3deg) translateY(-6px)}
.by-shop .by-visual img{object-position:62% center}
.by-wordmark{position:absolute;top:20px;left:22px;font:26px Georgia,serif;letter-spacing:.18em;color:#fff8e9;text-shadow:0 2px 12px #0006}
.by-copy{padding-bottom:4px}
.by-kicker{display:block;font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--lv-mute)}
.by h3{margin:14px 0 12px;font-size:clamp(24px,2.2vw,32px);font-weight:400;letter-spacing:-.04em;line-height:1.08}
.by-shop h3{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.03em}
.by p{font-size:13.5px;line-height:1.65;color:#6f6a63}
.by-cta{display:inline-flex;align-items:center;gap:18px;margin-top:20px;padding:10px 0 8px;border-bottom:1px solid currentColor;font-size:13.5px}

@media(max-width:1100px){.lv{padding:36px 32px 38px}.beyond{grid-template-columns:1fr;gap:40px}}
@media(max-width:760px){
  .lv-pair{grid-template-columns:1fr;border:0;gap:12px}
  .lv{padding:28px 22px 30px;border:1px solid var(--lv-hair)}
  .lv-advanced{border-color:var(--lv-ink)}
  .lv-name{font-size:56px;margin-top:22px}
  .lv-visual{margin-top:24px}
  .lv-cta{margin-top:28px}
  .lv-advanced .lv-cta{align-self:stretch;justify-content:space-between}
  .lv-label-beyond{margin-top:56px}
  .by{grid-template-columns:1fr 1fr;gap:18px}
  .by p{display:none}
}
@media(prefers-reduced-motion:reduce){.lv-visual>img,.by-visual img{transition:none!important;transform:none!important}}

/* Marketing Council: each level names the buyer's job; Advanced carries the one hard fact. */
.lv-best{margin:14px 0 0;font-size:14px;letter-spacing:.005em;color:var(--lv-mute)}
.lv-best:before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 1px 0;border-radius:50%;background:#bf4c34;vertical-align:middle}
.lv-advanced .lv-best{color:#cfc7bc}
.lv-proof{margin:14px 0 0;font-size:14px;line-height:1.55;color:#e9b3a4;max-width:440px}