/* Our Plants: a dark blueprint page, the plant photo with a blueprint wipe */
.page--our-plants { background: #0a0f1a; }
.page--our-plants main { color: #e6ecf5; }
.pl-hero { position: relative; padding: 140px 0 clamp(60px, 8vw, 100px); background: radial-gradient(70% 60% at 70% 0%, rgba(42, 111, 208, .22), transparent 70%), #0a0f1a; overflow: hidden; }
.pl-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 170, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 170, 255, .07) 1px, transparent 1px), linear-gradient(rgba(120, 170, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 170, 255, .035) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; mask-image: linear-gradient(180deg, #000 30%, transparent 95%); pointer-events: none; }
.pl-hero__copy { position: relative; display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 70px); }
.pl-hero__copy .crumbs { color: rgba(230, 236, 245, .6); }
.pl-code { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3em; color: #7fb0ff; }
.pl-hero__lede { max-width: 52ch; font-size: clamp(16px, 1.4vw, 19px); color: rgba(230, 236, 245, .78); }

.cmp { margin: 0; position: relative; }
.cmp__frame { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(127, 176, 255, .35); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8); --x: 55%; aspect-ratio: 825 / 500; }
.cmp__real, .cmp__plan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the blueprint: the same photo, inverted and tinted, with a drafting grid */
.cmp__plan { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp__plan img { filter: grayscale(1) invert(1) contrast(1.6) brightness(1.05); mix-blend-mode: normal; }
.cmp__plan::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #0b3d91; mix-blend-mode: multiply; }
.cmp__plan::after { content: ""; position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 40px 40px; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; z-index: 3; pointer-events: none; box-shadow: 0 0 20px rgba(127, 176, 255, .8); }
.cmp__handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.cmp__handle span::before, .cmp__handle span::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid #0a0f1a; border-width: 0 0 2px 2px; }
.cmp__handle span::before { left: 11px; transform: rotate(45deg); }
.cmp__handle span::after { right: 11px; transform: rotate(-135deg); }
.cmp__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp__range:focus-visible + .cmp__tag { outline: none; }
.cmp__frame:focus-within .cmp__handle span { box-shadow: 0 0 0 4px rgba(127, 176, 255, .7), 0 10px 30px rgba(0, 0, 0, .4); }
.cmp__tag { position: absolute; top: 16px; z-index: 3; font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; padding: 8px 10px; border-radius: 6px; background: rgba(10, 15, 26, .7); color: #fff; pointer-events: none; }
.cmp__tag--l { left: 16px; color: #7fb0ff; }
.cmp__tag--r { right: 16px; }
.cmp figcaption { display: flex; gap: 14px; margin-top: 14px; font-size: 13px; color: rgba(230, 236, 245, .6); }
.cmp figcaption span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #7fb0ff; }

.pl-stats { border-top: 1px solid rgba(127, 176, 255, .15); border-bottom: 1px solid rgba(127, 176, 255, .15); }
.pl-stats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-stats__row div { display: grid; gap: 6px; padding: 34px 24px; border-left: 1px solid rgba(127, 176, 255, .15); }
.pl-stats__row div:first-child { border-left: 0; padding-left: 0; }
.pl-stats__row b { font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: -.03em; color: #fff; }
.pl-stats__row div > span { font-size: 13.5px; color: rgba(230, 236, 245, .6); }

.pl-specs__head { display: grid; gap: 16px; margin-bottom: 50px; }
.pl-specs .eyebrow, .pl-cycle .eyebrow { color: rgba(230, 236, 245, .6); }
.specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.spec { grid-column: span 2; position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: 20px; border: 1px solid rgba(127, 176, 255, .18); background: linear-gradient(180deg, rgba(127, 176, 255, .06), rgba(127, 176, 255, .01)); transition: border-color .3s, background .3s; }
.spec:nth-child(4), .spec:nth-child(5) { grid-column: span 3; }
.spec:hover { border-color: rgba(127, 176, 255, .5); background: linear-gradient(180deg, rgba(127, 176, 255, .12), rgba(127, 176, 255, .02)); }
.spec__code { font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; color: #7fb0ff; }
.spec__art { width: 120px; height: 80px; fill: none; stroke: rgba(230, 236, 245, .55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spec__art .flow { stroke: #4fd1a5; stroke-dasharray: 4 6; animation: pl-flow 1.4s linear infinite; }
@keyframes pl-flow { to { stroke-dashoffset: -20; } }
.spec h3 { font-size: 20px; line-height: 1.25; color: #fff; }
.spec p { color: rgba(230, 236, 245, .68); font-size: 15px; }

.pl-cycle { border-top: 1px solid rgba(127, 176, 255, .15); }
.pl-cycle__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.pl-cycle__copy { display: grid; gap: 18px; }
.pl-cycle .lede { color: rgba(230, 236, 245, .75); }
.ring { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(127, 176, 255, .15); stroke-width: 2; }
.ring__run { fill: none; stroke: url(#none); stroke: #4fd1a5; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 120 622; animation: pl-ring 6s linear infinite; }
@keyframes pl-ring { to { stroke-dashoffset: -742; } }
.ring ul { list-style: none; margin: 0; padding: 0; }
/* each point sits exactly on the ring (r = 118 of 300); its text sits outside the circle */
.ring li { position: absolute; width: 0; height: 0; }
.ring li::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #0a0f1a; border: 2px solid #4fd1a5; box-sizing: border-box; }
.ring li p { position: absolute; left: -80px; width: 160px; display: grid; gap: 2px; text-align: center; }
.ring li b { font-weight: 500; color: #fff; font-size: 17px; }
.ring li span { font-size: 12.5px; line-height: 1.35; color: rgba(230, 236, 245, .6); }
.ring__a { left: 50%; top: 10.67%; }
.ring__a p { bottom: 16px; }
.ring__b { left: 84.06%; top: 69.67%; }
.ring__c { left: 15.94%; top: 69.67%; }
.ring__b p, .ring__c p { top: 16px; }
.ring .ring__b p { left: -50px; }
.ring .ring__c p { left: -110px; }
.ring__core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; color: #7fb0ff; }

.page--our-plants .next-page { background: #0a0f1a; color: #fff; border-color: rgba(127, 176, 255, .15); }
.page--our-plants .next-page .round { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.page--our-plants .next-page:hover .round { background: #fff; color: #0a0f1a; }

@media (max-width: 900px) {
  .pl-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-stats__row div:nth-child(3) { border-left: 0; padding-left: 0; }
  .specs { grid-template-columns: 1fr; }
  .spec, .spec:nth-child(4), .spec:nth-child(5) { grid-column: auto; }
  .pl-cycle__grid { grid-template-columns: 1fr; }
  .ring { width: min(72%, 300px); margin: 70px auto 80px; }
  .ring li p { left: -66px; width: 132px; }
  .ring .ring__b p { left: -44px; }
  .ring .ring__c p { left: -88px; }
}
@media (prefers-reduced-motion: reduce) {
  .spec__art .flow, .ring__run { animation: none; }
}