/* RanchProof public site. Built from option D of the Claude Design canvas "RanchProof · Sitio web". */

body{margin:0;background:#E3B55B}
a{color:#1F3A27}a:hover{color:#2E5E3A}
.pc-skip{position:absolute;left:16px;top:-100px;z-index:50;padding:10px 16px;border-radius:999px;background:#1F3A27;color:#F3F1EA;font-weight:600;text-decoration:none}
.pc-skip:focus{top:16px}
html[data-country="mx"] [data-only="cl"],html[data-country="cl"] [data-only="mx"]{display:none !important}
.cta-short{display:none}
@media (max-width:479px){.cta-long{display:none}.cta-short{display:inline}}
.pc{--green:#1F3A27;--leaf:#2E5E3A;--gold:#E3B55B;--cream:#F3F1EA;--paper:#FBFAF6;--ink:#1B1E19;--muted:#555B51;--line:#E2DFD5;--m:clamp(20px,4vw,64px);--eo:cubic-bezier(.23,1,.32,1);--eio:cubic-bezier(.77,0,.175,1);--screen:min(100vh,900px);--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  background:var(--gold);color:var(--green);font:400 18px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
.pc *,.pc *::before,.pc *::after{box-sizing:border-box}
.pc h1,.pc h2,.pc h3,.pc p,.pc ul{margin:0}
.pc ul{padding:0;list-style:none}
.pc svg{display:block;max-width:100%}
.pc button{font:inherit;color:inherit;cursor:pointer}
.pc :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.pc .tab{font-variant-numeric:tabular-nums}
.pc-wrap{max-width:1360px;margin:0 auto;padding:0 var(--m)}
.pc-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border-radius:999px;background:var(--green);color:var(--cream);font:600 16px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--eo),transform .16s var(--eo)}
.pc-btn:hover{background:var(--leaf);color:var(--cream)}
.pc-btn:active{transform:scale(.97)}
.pc-link{display:inline-flex;align-items:center;gap:8px;height:56px;color:var(--green);font-weight:600;text-decoration:none}
.pc-link span{transition:transform .25s var(--eo)}
.pc-link:hover span{transform:translateY(3px)}
.pc-h2{font:900 clamp(42px,5.4vw,92px)/.92 Archivo,Inter,sans-serif;letter-spacing:-.045em;color:var(--green);text-wrap:balance}
.pc-lede{max-width:46ch;margin-top:24px;font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--ink);text-wrap:pretty}

/* nav floats over the scene */
.pc-nav{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--m)}
.pc-brand{display:flex;align-items:center;gap:12px;color:var(--green);text-decoration:none;font:800 22px/1 Archivo,Inter,sans-serif;letter-spacing:-.03em}
.pc-brand svg{width:40px;height:40px}
.pc-links{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
.pc-links > a:not(.pc-btn){color:var(--green);text-decoration:none}
.pc-links > a:not(.pc-btn):hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.pc-links .pc-btn{height:44px;padding:0 20px;font-size:15px}
.pc-switch{display:inline-flex;padding:4px;border-radius:999px;background:rgba(31,58,39,.12);transition:background-color .8s var(--eo)}
.pc-switch a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--green);text-decoration:none;transition:background-color .25s var(--eo),color .25s var(--eo)}
.pc-switch a:hover{background:rgba(31,58,39,.12)}
.pc-switch a[aria-current="page"]{background:var(--green);color:var(--cream)}
/* at night the sky turns green: the bar and the hero text turn light */
.pc-brand,.pc-links > a,.pc-hero h1,.pc-hero p,.pc-link{transition:color .8s var(--eo)}
.pc-nav .pc-btn,.pc-hero .pc-btn{transition:background-color .8s var(--eo),color .8s var(--eo),transform .16s var(--eo)}
.pc[data-sky="night"] .pc-brand,.pc[data-sky="night"] .pc-links > a:not(.pc-btn){color:var(--cream)}
.pc[data-sky="night"] .pc-nav .pc-btn{background:var(--gold);color:var(--green)}
.pc[data-sky="night"] .pc-switch{background:rgba(243,241,234,.14)}
.pc[data-sky="night"] .pc-switch a{color:var(--cream)}
.pc[data-sky="night"] .pc-switch a[aria-current="page"]{background:var(--gold);color:var(--green)}
@media (min-width:960px){
  .pc[data-sky="night"] .pc-hero h1,.pc[data-sky="night"] .pc-hero p,.pc[data-sky="night"] .pc-link{color:var(--cream)}
  .pc[data-sky="night"] .pc-hero .pc-btn{background:var(--gold);color:var(--green)}
}

/* the day: one sticky scene, the steps scroll over it */
.pc-day{position:relative;height:var(--screen);min-height:680px;overflow:hidden}
.pc-stage{position:absolute;inset:0}
.pc-scene{width:100%;height:100%}
.pc-hero{position:absolute;z-index:2;top:150px;left:var(--m)}
.pc-now{position:absolute;z-index:2;left:var(--m);bottom:32px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 2 * var(--m));padding:8px 18px 8px 8px;border-radius:999px;background:var(--cream);color:var(--green);font-weight:600;font-size:15px}
.pc-now b{padding:6px 12px;border-radius:999px;background:var(--green);color:var(--cream);font:800 15px/1 Archivo,Inter,sans-serif}
.pc-hero h1{max-width:11ch;font:900 clamp(52px,6.6vw,112px)/.9 Archivo,Inter,sans-serif;letter-spacing:-.05em;color:var(--green);text-wrap:balance}
.pc-hero p{max-width:34ch;margin-top:28px;font-size:clamp(18px,1.35vw,20px);line-height:1.5;color:var(--green)}
.pc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}

/* scene: sky and land change with the hour */
.pc-scene g{transform-box:view-box;transform-origin:0 0}
.pc-sky{transition:fill 1.2s var(--eo)}
.pc-far{transition:fill 1.2s var(--eo)}
.pc-near{transition:fill 1.2s var(--eo)}
.pc-scene[data-hour="dawn"] .pc-sky{fill:#EFCB7E}
.pc-scene[data-hour="h06"] .pc-sky{fill:#EBC16A}
.pc-scene[data-hour="h10"] .pc-sky{fill:#E3B55B}
.pc-scene[data-hour="h14"] .pc-sky{fill:#ECD293}
.pc-scene[data-hour="h18"] .pc-sky{fill:#DCA24C}
.pc-scene[data-hour="h21"] .pc-sky{fill:#1F3A27}
.pc-far{fill:#D2A24A}.pc-near{fill:#C08F3D}
.pc-scene[data-hour="h18"] .pc-far{fill:#C38E3B}.pc-scene[data-hour="h18"] .pc-near{fill:#AE7C33}
.pc-scene[data-hour="h21"] .pc-far{fill:#284A33}.pc-scene[data-hour="h21"] .pc-near{fill:#3A6545}
.pc-sun{transition:transform 1.4s var(--eo),opacity .8s}
.pc-scene[data-hour="dawn"] .pc-sun{transform:translate(1180px,540px)}
.pc-scene[data-hour="h06"] .pc-sun{transform:translate(1110px,400px)}
.pc-scene[data-hour="h10"] .pc-sun{transform:translate(960px,200px)}
.pc-scene[data-hour="h14"] .pc-sun{transform:translate(720px,130px)}
.pc-scene[data-hour="h18"] .pc-sun{transform:translate(1250px,470px)}
.pc-scene[data-hour="h21"] .pc-sun{transform:translate(200px,760px);opacity:0}
.pc-moon,.pc-stars,.pc-house{opacity:0;transition:opacity 1s var(--eo)}
.pc-scene[data-hour="h21"] .pc-moon,.pc-scene[data-hour="h21"] .pc-stars,.pc-scene[data-hour="h21"] .pc-house{opacity:1}
.pc-stars circle{animation:pc-twinkle 3s ease-in-out infinite}
.pc-stars circle:nth-child(3n){animation-delay:-1s}
.pc-stars circle:nth-child(3n+1){animation-delay:-2s}
.pc-prop{opacity:0;transform:translateY(40px);transition:opacity .6s var(--eo),transform .8s var(--eo)}
.pc-scene[data-hour="h06"] .pc-manga,.pc-scene[data-hour="h10"] .pc-portal,.pc-scene[data-hour="h14"] .pc-trough,.pc-scene[data-hour="h18"] .pc-truck,.pc-scene[data-hour="h21"] .pc-house{opacity:1;transform:none}
.pc-antarc path{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:0 50%;animation:pc-arc 2.2s var(--eo) infinite}
.pc-antarc path:nth-child(2){animation-delay:.14s}
.pc-ripple{transform-box:fill-box;transform-origin:50% 50%;animation:pc-ripple 2.6s ease-out infinite}
.pc-window{animation:pc-glow 4s ease-in-out infinite}
.pc-cowpos{transition:transform 1.4s var(--eo)}
.pc-scene[data-hour="dawn"] .pc-fence,.pc-scene[data-hour="h10"] .pc-fence{animation:pc-fence 1.863s linear infinite}

/* the cow, same rig as docs/marca/tools/cow.mjs */
.pc-cow{--earl:0deg;--eart:0deg;--tilt:0deg;--hy:0px;--eye:1;--lx:0px;--ly:0px;--happy:0;--tail:0deg}
.pc-cow[data-pose="leyendo"]{--eart:-10deg;--tilt:-3deg;--eye:.45}
.pc-cow[data-pose="caminando"]{--tail:8deg;--earl:-4deg;--eart:4deg}
.pc-cow[data-pose="festejando"]{--earl:20deg;--eart:-20deg;--happy:1;--tail:14deg}
.pc-cow[data-pose="esperando"]{--tilt:12deg;--lx:-.6px;--ly:-.5px;--tail:4deg}
.pc-earl{transform:rotate(var(--earl));transition:transform .7s var(--eo)}
.pc-eart{transform:rotate(var(--eart));transition:transform .7s var(--eo)}
.pc-tag{transform:rotate(calc(var(--eart) * -1));transition:transform .7s var(--eo)}
.pc-tilt{transform:rotate(var(--tilt));transition:transform .7s var(--eo)}
.pc-head{transform:translateY(var(--hy));transition:transform .7s var(--eo)}
.pc-eyes{transform:translate(var(--lx),var(--ly)) scaleY(var(--eye));transition:transform .5s var(--eo)}
.pc-dot{opacity:calc(1 - var(--happy));transition:opacity .3s}
.pc-happy{opacity:var(--happy);transition:opacity .3s}
.pc-tail{transform:rotate(var(--tail));transition:transform .7s var(--eo)}
.pc-arc,.pc-flash{opacity:0}
.pc-blink{animation:pc-blink 4.8s var(--eio) infinite}
.pc-cow[data-pose="atenta"] .pc-bob,.pc-cow[data-pose="esperando"] .pc-bob,.pc-cow[data-pose="leyendo"] .pc-bob{animation:pc-breath 3.4s ease-in-out infinite}
.pc-cow[data-pose="leyendo"] .pc-eart-loop{animation:pc-flick 2.6s infinite}
.pc-cow[data-pose="leyendo"] .pc-tag-loop{animation:pc-flick-back 2.6s infinite}
.pc-cow[data-pose="leyendo"] .pc-flash{animation:pc-flash 2.6s infinite}
.pc-cow[data-pose="leyendo"] .pc-arc{animation:pc-arcping 2.6s infinite}
.pc-cow[data-pose="leyendo"] .pc-a1{animation-delay:.13s}
.pc-cow[data-pose="leyendo"] .pc-a2{animation-delay:.26s}
.pc-cow[data-pose="caminando"] .pc-nf,.pc-cow[data-pose="caminando"] .pc-fb{animation:pc-walk 1.1s infinite}
.pc-cow[data-pose="caminando"] .pc-ff,.pc-cow[data-pose="caminando"] .pc-nb{animation:pc-walk 1.1s -.55s infinite}
.pc-cow[data-pose="caminando"] .pc-bob{animation:pc-walkbob .55s ease-in-out infinite}
.pc-cow[data-pose="caminando"] .pc-tail-loop,.pc-cow[data-pose="atenta"] .pc-tail-loop,.pc-cow[data-pose="esperando"] .pc-tail-loop{animation:pc-tailsway 2.2s ease-in-out infinite}
.pc-cow[data-pose="festejando"] .pc-lift{animation:pc-hop 1.05s infinite}
.pc-cow[data-pose="festejando"] .pc-nf{animation:pc-tuck-f 1.05s infinite}
.pc-cow[data-pose="festejando"] .pc-nb{animation:pc-tuck-b 1.05s infinite}
.pc-cow[data-pose="festejando"] .pc-shadow{animation:pc-shadow 1.05s infinite}
.pc-cow[data-pose="atenta"] .pc-earl-loop,.pc-cow[data-pose="esperando"] .pc-earl-loop{animation:pc-earflick 6.2s var(--eo) infinite}

@keyframes pc-blink{0%,90%{transform:scaleY(1)}93%{transform:scaleY(.1)}96%,100%{transform:scaleY(1)}}
@keyframes pc-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(.8px)}}
@keyframes pc-earflick{0%,70%{transform:rotate(0)}73%{transform:rotate(9deg)}80%,100%{transform:rotate(0)}}
@keyframes pc-tailsway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes pc-flick{0%{transform:rotate(0)}4.3%{transform:rotate(-6deg)}14.8%,100%{transform:rotate(0)}}
@keyframes pc-flick-back{0%{transform:rotate(0)}4.3%{transform:rotate(6deg)}14.8%,100%{transform:rotate(0)}}
@keyframes pc-flash{0%{opacity:0}3.7%{opacity:1}21%,100%{opacity:0}}
@keyframes pc-arcping{0%{opacity:0;transform:scale(.8)}9.8%{opacity:1;transform:scale(1)}30.8%,100%{opacity:0;transform:scale(1.04)}}
@keyframes pc-walk{0%{transform:rotate(-13deg);animation-timing-function:linear}50%{transform:rotate(13deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}75%{transform:rotate(0) translateY(-5px)}100%{transform:rotate(-13deg)}}
@keyframes pc-walkbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes pc-hop{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}31%{transform:translateY(-20px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}62%{transform:translateY(0)}70%{transform:translateY(2px)}80%,100%{transform:translateY(0)}}
@keyframes pc-tuck-f{0%,62%,100%{transform:rotate(0)}31%{transform:rotate(-16deg)}}
@keyframes pc-tuck-b{0%,62%,100%{transform:rotate(0)}31%{transform:rotate(16deg)}}
@keyframes pc-shadow{0%,62%,100%{transform:scale(1)}31%{transform:scale(.7)}}
@keyframes pc-fence{from{transform:translateX(0)}to{transform:translateX(-134.4px)}}
@keyframes pc-arc{0%{opacity:0;transform:scale(.8)}14%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.06)}}
@keyframes pc-ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
@keyframes pc-glow{0%,100%{opacity:1}50%{opacity:.82}}
@keyframes pc-twinkle{0%,100%{opacity:1}50%{opacity:.35}}

/* the ranch as it happens (from option B, on the brand green) */
.pb{--s1:#183021;--s2:#21402C;--s3:#2A4A33;--bline:#2F5238;--mut:#B9C4B4;--sig:#8CCB98;--bad:#E58A62;padding:140px 0;background:var(--green);color:var(--cream)}
.pb .pc-h2{color:var(--cream)}
.pb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:56px}
.pb-head .pc-lede{max-width:44ch;margin-top:0;color:var(--mut)}
.pb-live{display:inline-flex;align-items:center;gap:8px;color:var(--sig);font:500 13px/1 var(--mono);letter-spacing:.04em}
.pb-live i{width:8px;height:8px;border-radius:50%;background:var(--sig);animation:pb-blink 1.4s ease-in-out infinite}
.pb-ranch{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:20px}
.pb-map{position:relative;padding:20px;border-radius:24px;background:var(--s1)}
.pb-map svg{width:100%;height:auto}
.pb-map .pf{stroke:#2C5136;stroke-width:3;stroke-linejoin:round}
.pb-map .lbl{fill:var(--mut);font:500 13px Inter,sans-serif}
.pb-map .lbl-b{fill:var(--cream);font:600 13px Inter,sans-serif}
.pb-map g{transform-box:view-box;transform-origin:0 0}
.pb-file circle{fill:var(--cream);animation:pb-walk 14s linear infinite}
.pb-graze circle{fill:#D8D3C2;animation:pb-graze 5s ease-in-out infinite alternate}
.pb-graze circle:nth-child(2n){animation-duration:6.5s;animation-delay:-2s}
.pb-graze circle:nth-child(3n){animation-duration:4.2s;animation-delay:-1s}
.pb-alarm{fill:var(--bad)}
.pb-alarm-ring{fill:none;stroke:var(--bad);stroke-width:2;transform-box:fill-box;transform-origin:50% 50%;animation:pb-alarm 2s var(--eo) infinite}
.pb-ant path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:0 50%;animation:pc-arc 1.8s var(--eo) infinite}
.pb-ant path:nth-child(2){animation-delay:.12s}
.pb-feed{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:24px;background:var(--s1)}
.pb-kpi{padding:16px 18px;border-radius:16px;background:var(--s2)}
.pb-kpi p{color:var(--mut);font-size:14px}
.pb-kpi b{display:block;margin-top:6px;font:800 34px/1 Archivo,Inter,sans-serif;letter-spacing:-.02em}
.pb-bar{height:6px;margin-top:12px;border-radius:9px;background:var(--s3);overflow:hidden}
.pb-bar span{display:block;height:100%;border-radius:inherit;background:var(--sig);transition:width .8s var(--eo)}
.pb-events{display:flex;flex-direction:column;gap:2px}
.pb-ev{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:10px 4px;border-top:1px solid var(--bline);font-size:14px}
.pb-ev time{color:var(--mut);font:400 12.5px/1.6 var(--mono)}
.pb-ev p{color:var(--cream)}
.pb-ev span{grid-column:2;color:var(--mut);font-size:13px}
.pb-ev.is-a{animation:pb-in-a .5s var(--eo)}
.pb-ev.is-b{animation:pb-in-b .5s var(--eo)}
.pb-ev.is-alert p{color:var(--bad)}
@keyframes pb-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pb-walk{0%{transform:translate(130px,430px);opacity:0}5%{opacity:1}35%{transform:translate(215px,330px)}50%{transform:translate(232px,262px)}80%{transform:translate(200px,160px)}92%{transform:translate(170px,120px);opacity:1}100%{transform:translate(160px,110px);opacity:0}}
@keyframes pb-graze{from{transform:translate(0,0)}to{transform:translate(6px,-4px)}}
@keyframes pb-alarm{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@keyframes pb-in-a{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pb-in-b{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* every record sealed (from option A) */
.pa-pass{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;padding:140px var(--m);max-width:1360px;margin:0 auto}
.pa-sec{background:var(--cream)}
.pa-pass-side{position:sticky;top:48px;align-self:start}
.pa-pass-side .pc-h2{font-size:clamp(40px,4.2vw,68px)}
.pa-seal{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:10px 16px;border-radius:999px;background:#E3EDE4;color:#1F4128;font-weight:600;font-size:15px}
.pa-seal svg{width:18px;height:18px}
.pa-page{position:relative;padding:56px 48px 64px;border-radius:28px;background:var(--paper);overflow:hidden}
.pa-guil{position:absolute;inset:0;width:100%;height:100%}
.pa-page-head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:28px;margin-bottom:36px;border-bottom:2px solid var(--green)}
.pa-page-head p{font:800 28px/1.1 Archivo,Inter,sans-serif;letter-spacing:-.02em;color:var(--green)}
.pa-page-head span{color:var(--muted);font-size:15px}
.pa-stamps{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
.pa-stamp{rotate:var(--r,0deg);padding:18px 20px 16px;border:6px double var(--c,var(--green));border-radius:16px;color:var(--c,var(--green));background:rgba(251,250,246,.6)}
.pa-stamp:nth-child(even){margin-top:44px}
.pa-stamp b{display:block;font:800 26px/1.05 Archivo,Inter,sans-serif;letter-spacing:-.02em}
.pa-stamp time{display:block;margin-top:4px;font:600 15px/1.3 Inter,sans-serif}
.pa-stamp p{margin-top:8px;color:var(--ink);font-size:15px;line-height:1.45}
.pa-stamp code{display:block;margin-top:10px;font:500 12.5px/1.4 var(--mono);color:var(--muted)}
.pa-stamp-final{grid-column:1 / -1;justify-self:center;margin-top:24px;padding:26px 40px;border:0;border-radius:999px;background:var(--gold);color:var(--green);text-align:center}
.pa-stamp-final b{font-size:30px}
@keyframes pa-stamp{0%{opacity:0;scale:1.35}60%{opacity:1;scale:.97}100%{opacity:1;scale:1}}
@keyframes pc-rise{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}
@supports (animation-timeline: view()){
  .pa-stamp{animation:pa-stamp linear both;animation-timeline:view();animation-range:entry 10% entry 80%}
  .pc-rise > *{animation:pc-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}

/* equipment and close (from option C) */
.pc-kitsec{padding:0 0 140px;background:var(--cream)}
.pc-kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.pc-kit div{padding:26px;border-radius:24px;background:#fff}
.pc-kit svg{width:64px;height:64px;margin-bottom:18px}
.pc-kit b{display:block;font:800 21px/1.15 Archivo,Inter,sans-serif;color:var(--green)}
.pc-kit span{display:block;margin-top:2px;color:var(--leaf);font-weight:600;font-size:14px}
.pc-kit p{margin-top:8px;font-size:15px;color:var(--ink)}
.pc-close{position:relative;overflow:hidden;padding:160px var(--m) 140px;background:var(--green);color:var(--cream);text-align:center}
.pc-close .pc-h2{color:var(--cream);max-width:12ch;margin:0 auto}
.pc-close p{max-width:42ch;margin:24px auto 0;font-size:19px;color:#DCE3D6}
.pc-close .pc-btn{margin-top:40px;background:var(--gold);color:var(--green)}
.pc-close .pc-btn:hover{background:#ECC574;color:var(--green)}
.pc-close-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pc-close-stars circle{fill:var(--cream);animation:pc-twinkle 3.4s ease-in-out infinite}
.pc-close-stars circle:nth-child(2n){animation-delay:-1.6s}
.pc-close > *:not(svg){position:relative}
.pc-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:24px var(--m) 40px;background:var(--green);color:#A9B8A6;font-size:14px}
.pc-social{display:flex;gap:8px}
.pc-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:rgba(243,241,234,.08);color:var(--cream);transition:background-color .2s var(--eo),color .2s var(--eo),transform .16s var(--eo)}
.pc-social a:hover{background:var(--gold);color:var(--green)}
.pc-social a:active{transform:scale(.94)}
.pc-social svg{width:20px;height:20px}

@media (max-width:379px){.pc-brand{font-size:0;gap:0}}
@media (max-width:959px){
  .pc-links > a{display:none}
  .pc-links{gap:12px}
  .pc-day{height:auto;min-height:0;display:flex;flex-direction:column}
  .pc-stage{position:relative;inset:auto;height:440px}
  .pc-hero{position:static;order:2;padding:32px var(--m) 56px}
  .pc-now{left:16px;bottom:auto;top:384px;padding:6px 14px 6px 6px;font-size:13px}
  .pb{padding:96px 0}
  .pb-ranch,.pa-pass{grid-template-columns:1fr}
  .pa-pass{padding:96px var(--m);gap:40px}
  .pa-pass-side{position:static}
  .pa-page{padding:36px 20px 44px}
  .pa-stamps{grid-template-columns:1fr}
  .pa-stamp:nth-child(even){margin-top:0}
  .pc-kit{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.pc *{animation:none !important;transition-duration:.01s !important}}

/* the life of cow 0021: the passport section told with the scroll (site.js adds .lv-on) */
.lv-sticky{padding:120px var(--m)}
.lv.lv-on{height:calc(var(--screen) + 3600px)}
.lv.lv-on .lv-sticky{position:sticky;top:0;height:var(--screen);min-height:640px;padding:40px var(--m)}
.lv-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;max-width:1360px;height:100%;margin:0 auto}
.lv-side{display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0}
.lv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.lv-kicker{margin-bottom:12px;font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
.lv .pc-h2{font-size:clamp(34px,3.4vw,56px)}
.lv .pc-lede{margin-top:12px;font-size:17px;max-width:52ch}
.lv .lv-btn{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--green);color:var(--cream);font:600 14px/1 Inter,sans-serif;cursor:pointer;transition:background .2s}
.lv-btn:hover{background:var(--leaf)}
.lv-btn:focus-visible,.lv-dot:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lv-btn,.lv-rail{visibility:hidden}
.lv.lv-on .lv-btn,.lv.lv-on .lv-rail{visibility:visible}
.lv-stage{position:relative;flex:1;min-height:380px;border-radius:24px;overflow:hidden;background:var(--gold)}
.lv-stage svg{position:absolute;inset:0;width:100%;height:100%}
.lv-now{position:absolute;left:24px;top:22px;max-width:320px;padding:16px 18px;border-radius:16px;background:rgba(251,250,246,.94);box-shadow:0 6px 24px rgba(31,58,39,.12)}
.lv-n{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--leaf)}
.lv-title{margin-top:8px;font:800 26px/1.05 Archivo,Inter,sans-serif;letter-spacing:-.02em;color:var(--green)}
.lv-meta{margin-top:6px;font:500 13px/1.3 var(--mono);color:var(--ink)}
.lv-text{margin-top:8px;font-size:14px;line-height:1.45;color:var(--muted)}
.lv-hint{position:absolute;right:22px;bottom:20px;padding:10px 14px;border-radius:999px;background:var(--green);color:var(--cream);font:600 13px/1 Inter,sans-serif;opacity:0;transition:opacity .4s}
.lv.lv-on .lv-hint{opacity:1;animation:lv-nudge 1.8s var(--eio) infinite}
.lv.lv-on .lv-hint.is-off{opacity:0}

/* the rail: 2021 and 2022 on the left, 2026 on the right, and the quiet years squeezed between */
.lv-rail{position:relative;height:62px;margin:0 10px}
.lv-rail-line,.lv-rail-gap,.lv-rail-fill{position:absolute;top:21px;height:2px}
.lv-rail-line{left:0;right:0;background:var(--line)}
.lv-rail-fill{left:0;width:0;background:var(--leaf);transition:width .8s var(--eo)}
.lv-rail-gap{z-index:1;left:55%;width:10%;background:repeating-linear-gradient(90deg,var(--cream) 0 6px,transparent 6px 12px)}
.lv-year{position:absolute;top:44px;transform:translateX(-50%);font:500 12px/1 var(--mono);color:var(--muted);white-space:nowrap}
.lv-year-start{transform:none}
.lv-year-gap{top:0}
.lv-dot{position:absolute;z-index:2;top:22px;width:14px;height:14px;padding:0;border:2px solid var(--green);border-radius:50%;background:var(--cream);transform:translate(-50%,-50%);cursor:pointer;transition:transform .4s var(--eo),background .3s,border-color .3s}
.lv-dot::before{content:"";position:absolute;inset:-15px}
.lv-dot.is-past{background:var(--leaf);border-color:var(--leaf)}
.lv-dot.is-now{background:var(--gold);border-color:var(--green);transform:translate(-50%,-50%) scale(1.5)}

/* the scene: the cow grows and the props slide in from the right (no fades of green shapes) */
.lv .pc-tag{transition:transform .7s var(--eo),opacity .5s}
.lv-notag .pc-tag{opacity:0}
.lv-cowpos{transition:transform 1s var(--eo)}
.lv-prop{transform:translateX(460px);transition:transform .9s var(--eo)}
.lv-prop.on{transform:none}
.lv-ping path{opacity:0;animation:lv-ping 2.4s infinite}
.lv-ping path:nth-child(2){animation-delay:.2s}
.lv-ring{stroke-dasharray:415;stroke-dashoffset:415;transition:stroke-dashoffset 1.4s .3s var(--eo)}
.lv-prop.on .lv-ring{stroke-dashoffset:0}
.lv-check{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .6s 1.5s var(--eo)}
.lv-prop.on .lv-check{stroke-dashoffset:0}
@keyframes lv-ping{0%{opacity:0}15%{opacity:1}55%,100%{opacity:0}}
@keyframes lv-nudge{0%,100%{translate:0 0}50%{translate:0 5px}}

/* the passport card, smaller so the nine stamps fit on one screen */
.lv .pa-page{display:flex;flex-direction:column;gap:14px;min-height:0;padding:26px 28px 22px}
.lv .pa-page-head{padding-bottom:14px;margin-bottom:0}
.lv .pa-page-head p{font-size:22px}
.lv .pa-stamps{gap:12px 16px;align-content:start}
.lv .pa-stamp{animation:none;padding:10px 14px 9px;border-width:5px;transition:opacity .2s,scale .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.lv .pa-stamp:nth-child(even){margin-top:0}
.lv.lv-on .pa-stamp{opacity:0;scale:1.35}
.lv.lv-on .pa-stamp.is-on{opacity:1;scale:1}
.lv .pa-stamp.is-new{box-shadow:0 0 0 4px rgba(227,181,91,.55)}
.lv .pa-stamp b{font-size:17px}
.lv .pa-stamp time{margin-top:2px;font-size:12.5px}
.lv .pa-stamp p{margin-top:4px;font-size:12.5px;line-height:1.35}
.lv .pa-stamp code{margin-top:5px;font-size:11px}
.lv .pa-stamp-final{margin-top:2px;padding:12px 26px}
.lv .pa-stamp-final b{font-size:20px}
.lv .pa-seal{margin-top:auto;align-self:flex-start}
@media (min-width:960px) and (max-height:780px){.lv.lv-on .pa-stamp p{display:none}}
@media (max-width:959px){
  .lv-sticky{padding:96px var(--m)}
  .lv.lv-on .lv-sticky{padding:20px var(--m)}
  .lv-grid{grid-template-columns:1fr;gap:16px}
  .lv.lv-on .lv-grid{grid-template-rows:auto auto;align-content:center}
  .lv.lv-on .pc-lede,.lv-btn,.lv-hint{display:none}
  .lv .pc-h2{font-size:32px}
  /* on a phone the card sits above the scene, and the scene keeps its shape instead of filling a tall box */
  .lv-stage{display:flex;flex-direction:column;flex:none;min-height:0}
  .lv-stage svg{position:relative;inset:auto;height:auto;max-height:calc(max(var(--screen),640px) - 480px)}
  .lv-now{order:-1;position:static;margin:12px 12px 0;max-width:none;padding:10px 12px}
  .lv-title{font-size:20px}
  .lv-text{display:none}
  .lv.lv-on .pa-page{padding:14px 16px}
  .lv.lv-on .pa-page-head,.lv.lv-on .pa-seal{display:none}
  .lv.lv-on .pa-stamps .pa-stamp{display:none}
  .lv.lv-on .pa-stamps .pa-stamp.is-new{display:block}
}