/* Landing page only. Everything here is an extra on top of public-pages.css: without script or with reduced motion the page is complete
   and the demo is a still four-panel storyboard. Motion is switched on by html.lp-motion (set in the page head). */

body.lp-page .pp-wrap { max-width: 1120px; }
.lp-sr { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/* shared interaction polish */
.pp-button, .pp-card, .lp-privacy, .lp-invite { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; border-radius: 6px; }
.pp-button:hover { transform: translateY(-1px); }
.pp-card:hover { border-color: var(--brand-line); box-shadow: 0 10px 24px -16px rgba(31, 42, 46, .35); transform: translateY(-2px); }

/* hero */
.lp-hero { align-items: center; display: grid; gap: 28px 40px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto auto auto 1fr; padding: 24px 0 22px; }
.lp-copy { display: contents; }   /* the poster headline spans both columns; the words and buttons sit left of the demo */
.lp-hero h1 { font-size: clamp(2.4rem, 6.72vw, 5.12rem); grid-column: 1 / -1; letter-spacing: -.025em; line-height: .98; margin: 0 0 22px; max-width: 9.5em; text-wrap: balance; }
.lp-copy > p, .lp-copy > .pp-actions, .lp-copy > .lp-small { grid-column: 1; }
.lp-copy > .lp-small { align-self: start; }
.lp-demo { grid-column: 2; grid-row: 2 / span 3; transform: rotate(2.5deg); }
.lp-hero p { font-size: 1.125rem; line-height: 1.65; max-width: 30em; text-wrap: pretty; }
.lp-hero p .lp-lead-in { color: var(--ink); font-weight: 700; }
.lp-hero .lp-cap { font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; margin: auto 0 0; max-width: none; }
.lp-signin { align-self: center; color: var(--brand-text); font-weight: 600; padding: 10px 6px; text-decoration: underline; text-underline-offset: 4px; }
.lp-signin:hover { color: var(--brand-strong); }
.lp-hero .lp-small { color: var(--muted); font-size: .92rem; margin: 10px 0 0; }
.lp-hero .pp-actions { align-items: center; }

/* a faint constellation behind the hero: linked dots (solid = shared tag, dashed = close in meaning), purely decorative */
.lp-hero { position: relative; }
.lp-bg { color: var(--brand-text); height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 0;
         -webkit-mask-image: radial-gradient(ellipse 90% 95% at 62% 40%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%); mask-image: radial-gradient(ellipse 90% 95% at 62% 40%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%); }
.lp-bg .e1, .lp-bg .e2 { fill: none; stroke: currentColor; stroke-width: 1; }
.lp-bg .e1 { opacity: .26; }
.lp-bg .e2 { opacity: .21; stroke-dasharray: 3 5; }
.lp-bg .n { fill: currentColor; opacity: .39; }
.lp-motion .lp-bg-drift { animation: lpDrift 14s ease-in-out infinite alternate; transform-origin: 560px 280px; }   /* a slow drift inside the picture, and the dots take turns to glow */
.lp-motion .lp-bg .n { animation: lpTwinkle 6s ease-in-out infinite; }
.lp-motion .lp-bg .n2 { animation-delay: -2s; } .lp-motion .lp-bg .n3 { animation-delay: -4s; }
.lp-motion .lp-bg.is-still .lp-bg-drift, .lp-motion .lp-bg.is-still .n { animation-play-state: paused; }   /* off screen, or the visitor pressed Pause */
.lp-copy, .lp-demo { position: relative; z-index: 1; }

/* the demonstration window */
.lp-demo { position: relative; }
.lp-window { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 34px 60px -30px rgba(31, 42, 46, .5); overflow: hidden; }
.lp-bar { align-items: center; background: var(--soft); border-bottom: 1px solid var(--line); display: flex; gap: 12px; padding: 9px 12px; }
.lp-dots { display: inline-flex; gap: 5px; }
.lp-dots i { background: var(--line); border-radius: 50%; display: block; height: 9px; width: 9px; }
.lp-url { background: var(--card); border-radius: 999px; color: var(--muted); font-size: .78rem; padding: 2px 12px; }
.lp-stage { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 12px; }
.lp-scene { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; font-size: .84rem; gap: 8px; min-height: 150px; padding: 12px; position: relative; }
.lp-mini { background: var(--card); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; }
.lp-mini strong { font-size: .86rem; line-height: 1.3; }
.lp-mini small, .lp-line { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.lp-hero .lp-cap, .lp-cap { color: var(--ink); text-transform: uppercase; }
.lp-cap b { background: var(--brand); border-radius: 50%; color: var(--on-brand); display: inline-block; font-size: .9rem; height: 26px; line-height: 26px; margin-right: 8px; text-align: center; vertical-align: middle; width: 26px; }
.lp-link { align-items: center; background: var(--brand-soft); border-radius: 999px; color: var(--brand-strong); display: inline-flex; font-size: .78rem; gap: 6px; padding: 3px 10px; width: fit-content; }
.lp-tags { display: flex; gap: 5px; margin-top: 2px; }
.lp-tags i { background: var(--brand-soft); border-radius: 999px; color: var(--brand-strong); font-size: .72rem; font-style: normal; padding: 1px 8px; }
.lp-search { align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 999px; display: flex; gap: 6px; padding: 4px 10px; }
.lp-search svg { color: var(--muted); flex: none; }
.lp-rows { display: flex; flex-direction: column; gap: 4px; }
.lp-row { border-radius: 8px; font-size: .78rem; padding: 3px 8px; }
.lp-row.hit { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.lp-row.dim { color: var(--muted); }
.lp-chat { display: flex; flex-direction: column; gap: 5px; }
.lp-ask { align-self: flex-end; background: var(--brand); border-radius: 12px 12px 3px 12px; color: var(--on-brand); font-size: .76rem; padding: 4px 10px; }
.lp-answer { background: var(--card); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; font-size: .76rem; padding: 4px 10px; }
.lp-answer em { color: var(--muted); display: block; font-size: .7rem; font-style: normal; }
.lp-why { background: var(--brand-soft); border-radius: 999px; color: var(--brand-strong); font-size: .74rem; font-weight: 600; padding: 1px 9px; width: fit-content; }
.lp-why.alt { background: transparent; border: 1px dashed var(--brand-line); }
.lp-fan { display: grid; gap: 8px 0; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.15fr); grid-template-rows: 1fr 1fr; }
.lp-fan .lp-a { align-self: center; grid-column: 1; grid-row: 1 / 3; }
.lp-wires { grid-column: 2; grid-row: 1 / 3; height: 100%; overflow: visible; width: 100%; }
.lp-wires path { fill: none; stroke: var(--brand-text); stroke-linecap: round; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.lp-wires .w2 { stroke-dasharray: 5 5; }
.lp-fan .lp-b { grid-column: 3; grid-row: 1; }
.lp-fan .lp-c { grid-column: 3; grid-row: 2; }
.lp-note { gap: 6px; }
.lp-note-body { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 92px; }
.lp-checks { display: flex; flex-direction: column; gap: 6px; }
.lp-photo { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 12px -6px rgba(31, 42, 46, .5); display: block; padding: 4px 4px 9px; transform: rotate(3deg); }
.lp-photo svg { border-radius: 2px; display: block; height: auto; }
.lp-check { align-items: flex-start; display: flex; font-size: .78rem; gap: 6px; line-height: 1.3; }
.lp-check svg { flex: none; margin-top: 1px; }
.lp-check rect { fill: none; stroke: var(--brand-text); stroke-width: 1.6; }
.lp-check path { fill: none; stroke: var(--brand-text); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.lp-pause { background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: .8rem; margin-top: 10px; min-height: 36px; padding: 4px 14px; }
.lp-pause:hover { border-color: var(--brand); color: var(--brand-strong); }
.lp-pause[hidden] { display: none; }

/* feature cards */
.lp-cards { margin: 14px 0 22px; }
.lp-card .lp-ico { background: var(--brand-soft); border-radius: 16px; color: var(--brand-strong); display: grid; height: 64px; margin-bottom: 16px; place-items: center; width: 64px; }
.lp-ico svg { height: 42px; width: 42px; }
.lp-ico svg * { transform-box: fill-box; transform-origin: center; }
.lp-card { border-color: var(--brand-line); display: flex; flex-direction: column; padding: 26px 26px 18px; }   /* same foot on every card: the Watch buttons line up */
.lp-card p { color: var(--ink); font-size: 1.02rem; line-height: 1.55; }
.lp-cards .lp-card h2 { font-family: var(--serif); font-size: 1.55rem; line-height: 1.1; margin: 0 0 10px; text-wrap: balance; }

/* the two lower panels: compact and clearly different */
.lp-trust { align-items: stretch; display: grid; gap: 14px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); margin: 8px 0 12px; }
.lp-privacy, .lp-invite { border-radius: 14px; padding: 16px 18px; }
.lp-privacy { background: var(--card); border: 1px solid var(--line); }
.lp-invite { background: none; border: 0; padding: 16px 0; color: var(--ink); }
.lp-panel-head { align-items: center; display: flex; gap: 10px; margin-bottom: 6px; }
.lp-panel-ico { color: var(--brand-text); flex: none; }
.lp-lock { display: inline-flex; position: relative; }
.lp-lock-shackle { transform-box: fill-box; transform-origin: 0 100%; }
.lp-lock-ring { border: 1.5px solid var(--brand-text); border-radius: 50%; inset: -7px; opacity: 0; pointer-events: none; position: absolute; }
.lp-facts li:nth-child(2) { --i: 1; } .lp-facts li:nth-child(3) { --i: 2; }
.lp-trust h2 { font-family: var(--serif); font-size: 1.1rem; margin: 0; }
.lp-lead { color: var(--ink); font-weight: 600; margin: 0; }
.lp-facts { margin: 6px 0 6px; padding-left: 1.1rem; }
.lp-facts li { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 3px 0; }
.lp-facts b { color: var(--ink); }
.lp-trust p { font-size: .94rem; margin: 6px 0; }
.lp-more { font-size: .88rem !important; }
.lp-invite .pp-button { font-size: .95rem; padding: 8px 16px; }
.lp-invite a:not(.pp-button) { color: var(--brand-strong); }
.lp-more a { color: var(--brand-text); }

@media (max-width: 900px) {
    .lp-hero { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
    .lp-hero h1 { font-size: clamp(1.92rem, 9.2vw, 2.88rem); }
    .lp-demo { grid-column: 1; grid-row: auto; transform: none; }
    .lp-bg { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 55%, transparent 90%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 55%, transparent 90%); }
    .lp-trust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .lp-stage { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- motion: only with html.lp-motion (set when the visitor has not asked for reduced motion) ---------- */
.lp-motion .lp-reveal { opacity: 0; transform: translateY(14px); }
.lp-motion .lp-reveal.in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: var(--d, 0ms); }
.lp-motion .lp-card.in:hover { transform: translateY(-2px); transition-delay: 0ms; }

/* the window plays one scene at a time, in a 16-second loop */
.lp-motion .lp-stage { display: block; height: 304px; padding: 0; position: relative; }
.lp-motion .lp-scene { background: transparent; border: 0; inset: 0; padding: 16px 18px 50px; position: absolute; }
.lp-motion .lp-hero .lp-cap { bottom: 10px; left: 18px; margin: 0; position: absolute; }
.lp-motion .lp-scene { animation: lpScene 28s linear var(--t, 0s) infinite both; }
.lp-motion .lp-s2 { --t: 7s; } .lp-motion .lp-s3 { --t: 14s; } .lp-motion .lp-s4 { --t: 21s; }

.lp-motion .lp-s1 .lp-link { animation: lpLink 28s linear var(--t, 0s) infinite both; }
.lp-motion .lp-s1 .lp-newcard { animation: lpFadeUp 28s linear var(--t, 0s) infinite both; }
.lp-motion .lp-s1 .l1 { animation: lpWipe1 28s linear var(--t, 0s) infinite both; }
.lp-motion .lp-s1 .l2 { animation: lpWipe2 28s linear var(--t, 0s) infinite both; }
.lp-motion .lp-s1 .lp-tags { animation: lpPop 28s linear var(--t, 0s) infinite both; }
.lp-motion .lp-s1 .lp-link { position: absolute; left: 18px; top: 18px; }
.lp-motion .lp-s1 .lp-newcard { margin-top: 6px; }

.lp-motion .lp-typed { animation: lpType 28s steps(7, end) var(--t) infinite both; border-right: 2px solid var(--brand-text); display: inline-block; overflow: hidden; white-space: nowrap; }
.lp-motion .lp-s2 .lp-row.hit { animation: lpHit 28s linear var(--t) infinite both; }
.lp-motion .lp-s2 .lp-row.dim { animation: lpDim 28s linear var(--t) infinite both; }
.lp-motion .lp-s2 .lp-ask { animation: lpPopIn 28s linear var(--t) infinite both; }
.lp-motion .lp-s2 .lp-answer { animation: lpPopIn2 28s linear var(--t) infinite both; }

.lp-motion .lp-s3 .lp-a { animation: lpFromLeft 28s linear var(--t) infinite both; }
.lp-motion .lp-s3 .lp-b { animation: lpFromRight 28s linear var(--t) infinite both; }
.lp-motion .lp-s3 .lp-c { animation: lpFromRight2 28s linear var(--t) infinite both; }
.lp-motion .lp-s3 .lp-wires .w1 { animation: lpDraw 28s linear var(--t) infinite both; stroke-dasharray: 90; }
.lp-motion .lp-s3 .lp-wires .w2 { animation: lpFadeWire 28s linear var(--t) infinite both; }
.lp-motion .lp-s3 .lp-b .lp-why { animation: lpPopIn2 28s linear var(--t) infinite both; }
.lp-motion .lp-s3 .lp-c .lp-why { animation: lpPopIn3 28s linear var(--t) infinite both; }

.lp-motion .lp-s4 .lp-note { animation: lpCascadeNote 28s linear calc(var(--t) + .1s) infinite both; }
.lp-motion .lp-s4 .lp-check { animation: lpCascadeRow 28s linear calc(var(--t) + .7s + var(--k, 0) * .605s) infinite both; }
.lp-motion .lp-s4 .c1 { --k: 0; } .lp-motion .lp-s4 .c2 { --k: 1; } .lp-motion .lp-s4 .c3 { --k: 2; }
.lp-motion .lp-s4 .lp-check path { animation: lpCascadeTick 28s linear calc(var(--t) + 1.15s + var(--k, 0) * .605s) infinite both; stroke-dasharray: 14; }
.lp-motion .lp-s4 .lp-photo { animation: lpCascadePhoto 28s linear calc(var(--t) + 2.81s) infinite both; }

@keyframes lpScene { 0% { opacity: 0; } 1.5%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes lpLink { 0% { opacity: 0; transform: translateY(-14px); } 3%, 8% { opacity: 1; transform: none; } 10%, 100% { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes lpFadeUp { 0%, 8% { opacity: 0; transform: translateY(10px); } 11%, 100% { opacity: 1; transform: none; } }
@keyframes lpWipe1 { 0%, 11% { clip-path: inset(0 100% 0 0); } 15%, 100% { clip-path: inset(0); } }
@keyframes lpWipe2 { 0%, 14% { clip-path: inset(0 100% 0 0); } 18%, 100% { clip-path: inset(0); } }
@keyframes lpPop { 0%, 18% { opacity: 0; transform: scale(.85); } 21%, 100% { opacity: 1; transform: none; } }
@keyframes lpType { 0% { width: 0; } 7%, 100% { width: 7.4ch; } }
@keyframes lpHit { 0%, 8% { background-color: transparent; } 10%, 100% { background-color: var(--brand-soft); } }
@keyframes lpDim { 0%, 8% { opacity: 1; } 10%, 100% { opacity: .4; } }
@keyframes lpPopIn { 0%, 11% { opacity: 0; transform: translateY(6px); } 13%, 100% { opacity: 1; transform: none; } }
@keyframes lpPopIn2 { 0%, 15% { opacity: 0; transform: translateY(6px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes lpFromLeft { 0% { opacity: 0; transform: translateX(-22px); } 3%, 100% { opacity: 1; transform: none; } }
@keyframes lpFromRight { 0% { opacity: 0; transform: translateX(22px); } 3%, 100% { opacity: 1; transform: none; } }
@keyframes lpFromRight2 { 0%, 5% { opacity: 0; transform: translateX(22px); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes lpFadeWire { 0%, 9% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes lpPopIn3 { 0%, 12% { opacity: 0; transform: translateY(6px); } 15%, 100% { opacity: 1; transform: rotate(0); } }
@keyframes lpDraw { 0%, 4% { stroke-dashoffset: 80; } 9%, 100% { stroke-dashoffset: 0; } }

@keyframes lpCascadeNote { 0% { opacity: 0; transform: translateY(8px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 4%, 100% { opacity: 1; transform: none; } }
@keyframes lpCascadeRow { 0% { opacity: 0; transform: translateX(-16px); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 3%, 100% { opacity: 1; transform: none; } }
@keyframes lpCascadeTick { 0% { stroke-dashoffset: 14; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 2%, 100% { stroke-dashoffset: 0; } }
@keyframes lpCascadePhoto { 0% { opacity: 0; transform: translateY(-18px) rotate(-6deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); } 4%, 100% { opacity: 1; transform: rotate(3deg); } }

.lp-motion .lp-privacy.in .lp-lock-shackle { animation: lpShut .55s cubic-bezier(.16, 1, .3, 1) .6s both; }
.lp-motion .lp-privacy.in .lp-lock-ring { animation: lpRing 1s ease-out 1s forwards; }
.lp-motion .lp-privacy.in .lp-facts li { animation: lpFact .6s cubic-bezier(.16, 1, .3, 1) calc(.2s + var(--i, 0) * .16s) both; }
@keyframes lpShut { 0% { transform: translateY(-5px) rotate(-18deg); } 100% { transform: none; } }
@keyframes lpRing { 0% { opacity: .55; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes lpFact { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

@media (min-width: 901px) { .lp-motion .lp-demo { animation: lpSettle .9s cubic-bezier(.16, 1, .3, 1) .25s both; } }   /* the tilted window settles in once */
@keyframes lpSettle { from { opacity: 0; transform: translateY(20px) rotate(5.5deg); } to { opacity: 1; transform: rotate(2.5deg); } }

@keyframes lpDrift { from { transform: translate(-48px, 26px) rotate(-1.2deg) scale(1.1); } to { transform: translate(48px, -26px) rotate(1.2deg) scale(1.1); } }
@keyframes lpTwinkle { 0%, 55%, 100% { opacity: .39; } 78% { opacity: .85; } }

/* feature-card icons: they play once when the card appears and again on hover (landing.js adds .play) */
.lp-motion .lp-card.play .i-drop { animation: iDrop .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.lp-motion .lp-card.play .i-tick { animation: iDraw .6s ease-out .45s both; stroke-dasharray: 30; }
.lp-motion .lp-card.play .i-glass { animation: iSweep 1.2s ease-in-out both; }
.lp-motion .lp-card.play .i-hit { animation: iFade .5s ease-out .9s both; }
.lp-motion .lp-card.play .i-wire { animation: iDraw .7s ease-out both; stroke-dasharray: 40; }
.lp-motion .lp-card.play .w2 { animation-delay: .25s; } .lp-motion .lp-card.play .w3 { animation-delay: .5s; }
.lp-motion .lp-card.play .i-node { animation: iPop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.lp-motion .lp-card.play .n2 { animation-delay: .15s; } .lp-motion .lp-card.play .n3 { animation-delay: .3s; }
.lp-motion .lp-card.play .i-pen { animation: iDraw .7s ease-out .5s both; stroke-dasharray: 16; }
.lp-motion .lp-card.play .i-pen.p2 { animation-delay: 1s; }
@keyframes iDrop { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } }
@keyframes iDraw { 0% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 0; } }
@keyframes iSweep { 0% { transform: translateY(-9px); } 50% { transform: translateY(9px); } 100% { transform: none; } }
@keyframes iFade { 0% { opacity: 0; } 100% { opacity: .18; } }
@keyframes iPop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .lp-motion .lp-reveal, .lp-motion .lp-reveal.in { opacity: 1; transform: none; transition: none; }
    .lp-motion *, .lp-motion *::before, .lp-motion *::after { animation: none !important; }
    .pp-button, .pp-card { transition: none; }
    .pp-button:hover, .pp-card:hover { transform: none; }
}

/* feature cards: title and sentence always visible; with script a Watch button plays that step of the demo */
.lp-remote-hint { color: var(--muted); font-size: .95rem; margin: 10px 0 -2px; text-align: center; }
.lp-remote-hint[hidden] { display: none; }
.lp-watch { align-items: center; align-self: flex-start; background: var(--brand); border: 0; border-radius: 999px; color: var(--on-brand); cursor: pointer; display: inline-flex; font: inherit; font-size: .95rem; font-weight: 600; gap: 8px; margin-top: auto; min-height: 44px; padding: 6px 16px 6px 12px; }
.lp-card.is-watchable p { margin-bottom: 14px; }   /* room above the button, which sits at the foot of every card */
.lp-watch::before { content: ""; background: currentColor; clip-path: polygon(20% 10%, 90% 50%, 20% 90%); display: inline-block; height: 14px; width: 14px; }
.lp-watch:hover { background: var(--brand-hover); }
.lp-card.is-watching { border-color: var(--brand); box-shadow: 0 12px 26px -14px rgba(194, 65, 12, .55); }
.lp-card.is-watching .lp-watch { background: var(--brand-soft); color: var(--brand-strong); }
.lp-card.is-watching .lp-watch::before { clip-path: none; border-radius: 50%; height: 9px; width: 9px; }