/* Tape Unroll Stage - Seed Tape Bench home (Appily-OneHundredSix)
 Layout: wrap-token gutters; promise/parade minmax(0); mid bp before 4-col crush;
 beads softened off image; page/stage overflow-x clip. */
.page-a106-tapestage { overflow-x: clip; }

.st-stage {
 position: relative;
 min-height: clamp(560px, 88vh, 820px);
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 align-items: center;
 gap: 28px;
 padding: clamp(28px, 5vw, 56px) calc((100% - var(--a106-wrap)) / 2);
 isolation: isolate;
 overflow-x: clip;
}

.st-furrows {
 position: absolute;
 inset: 0;
 z-index: -1;
 display: grid;
 grid-template-rows: repeat(6, 1fr);
 gap: 10px;
 padding: 24px 0;
 pointer-events: none;
 opacity: 0.55;
}
.st-furrows span {
 background: linear-gradient(90deg, transparent, rgba(42, 33, 24, 0.08), transparent);
 border-top: 2px dashed rgba(10, 126, 164, 0.18);
 border-bottom: 2px dashed rgba(196, 92, 38, 0.12);
}

.st-stage-copy { max-width: 34rem; }
.st-brand {
 margin: 0 0 14px;
 display: inline-flex;
 flex-direction: column;
 padding: 12px 18px 14px;
 background: var(--a106-kraft);
 border: 3px solid var(--a106-soil);
 box-shadow: var(--a106-hard);
 transform: rotate(-1.5deg);
 line-height: 0.92;
}
.st-brand-top {
 font-family: var(--a106-font-body);
 font-size: clamp(0.85rem, 1.4vw, 1rem);
 font-weight: 800;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--a106-clay);
}
.st-brand-bot {
 font-family: var(--a106-font-display);
 font-size: clamp(3.2rem, 8.5vw, 5.8rem);
 font-weight: 700;
 color: var(--a106-drip-deep);
 text-shadow: 4px 4px 0 var(--a106-sprout);
}
.st-brand[data-st-unroll] .st-brand-bot {
 animation: st-unroll 700ms var(--a106-ease) both;
}
@keyframes st-unroll {
 from { opacity: 0; transform: translateX(-24px) skewX(-4deg); filter: blur(2px); }
 to { opacity: 1; transform: none; filter: none; }
}
.st-stage h1 {
 margin: 0 0 12px;
 font-family: var(--a106-font-display);
 font-size: clamp(1.7rem, 3.4vw, 2.5rem);
 font-weight: 600;
 color: var(--a106-ink);
 max-width: 16ch;
}
.st-lede {
 margin: 0 0 22px;
 color: var(--a106-mute);
 font-size: 1.05rem;
 max-width: 38ch;
}
.st-cta-row { display: flex; flex-wrap: wrap; gap: var(--a106-space-2); }
.st-cta {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 min-width: 9.5rem;
 padding: 0 var(--a106-space-3);
 text-decoration: none;
 font-family: var(--a106-font-body);
 font-weight: 800;
 font-size: 0.95rem;
 letter-spacing: 0.01em;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard);
 overflow: hidden;
 transition: transform 160ms var(--a106-ease), box-shadow 160ms var(--a106-ease), color 160ms var(--a106-ease);
}
.st-cta span { position: relative; z-index: 1; }
.st-cta::after {
 content: "";
 position: absolute;
 inset: 0;
 transform: translateY(105%);
 transition: transform 260ms var(--a106-ease);
}
.st-cta:hover::after { transform: translateY(0); }
.st-cta:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 2px;
}
.st-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--a106-soil); }
.st-cta--clay { background: var(--a106-clay); color: var(--a106-on-clay); }
.st-cta--clay::after { background: var(--a106-drip); }
.st-cta--clay:hover { color: var(--a106-on-drip); }
.st-cta--drip { background: var(--a106-drip); color: var(--a106-on-drip); }
.st-cta--drip::after { background: var(--a106-sprout); }
.st-cta--drip:hover { color: var(--a106-sprout-ink); }
.st-cta--sprout { background: var(--a106-sprout); color: var(--a106-sprout-ink); }
.st-cta--sprout::after { background: var(--a106-bloom); }
.st-cta--sprout:hover { color: var(--a106-on-bloom); }
.st-cta--ghost { background: var(--a106-surface); color: var(--a106-ink); }
.st-cta--ghost::after { background: var(--a106-kraft); }
.st-cta--ghost:hover { color: var(--a106-ink); }
.st-cta--ghost-light {
 background: rgba(255, 255, 255, 0.12);
 color: #fff;
 border-color: rgba(255, 255, 255, 0.85);
 box-shadow: none;
}
.st-cta--ghost-light::after { background: rgba(255, 255, 255, 0.22); }
.st-cta--ghost-light:hover { color: #fff; }

.st-pot {
 position: relative;
 width: min(100%, 460px);
 aspect-ratio: 1;
 margin-inline: auto;
 justify-self: end;
}
.st-pot-ring {
 display: block;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 border: 6px solid var(--a106-soil);
 box-shadow:
 0 0 0 10px var(--a106-kraft),
 0 0 0 14px var(--a106-soil),
 10px 14px 0 rgba(42, 33, 24, 0.18);
 background: var(--a106-surface);
}
.st-pot-ring:focus-visible {
 outline: 3px solid var(--a106-sprout);
 outline-offset: 6px;
}
.st-pot-ring img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 700ms var(--a106-ease);
}
.st-pot-ring:hover img { transform: scale(1.06); }
.st-bead {
 position: absolute;
 width: 14px;
 height: 18px;
 border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
 border: 2px solid var(--a106-soil);
 box-shadow: var(--a106-hard-sm);
 opacity: 0.72;
 pointer-events: none;
 animation: st-drip 3.2s var(--a106-ease) infinite;
}
.st-bead--drip { background: var(--a106-drip); top: -4%; left: -2%; }
.st-bead--clay { background: var(--a106-clay); top: -2%; right: -4%; animation-delay: .4s; }
.st-bead--sprout { background: var(--a106-sprout); bottom: -4%; left: -4%; animation-delay: .8s; }
.st-bead--bloom { background: var(--a106-bloom); bottom: -2%; right: -2%; animation-delay: 1.2s; }
@keyframes st-drip {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(10px); }
}

.st-section { padding: clamp(40px, 7vw, 72px) 0; }
.st-kicker {
 margin: 0 0 8px;
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--a106-clay);
}
.st-section h2 {
 margin: 0 0 22px;
 font-family: var(--a106-font-display);
 font-size: clamp(1.6rem, 3vw, 2.2rem);
 font-weight: 600;
 color: var(--a106-ink);
}

.st-promise-grid {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
}
.st-promise-grid li {
 padding: 18px 16px;
 background: var(--a106-surface);
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard-sm);
 display: grid;
 gap: 6px;
 opacity: 0;
 transform: translateY(16px);
 transition: opacity 480ms var(--a106-ease), transform 480ms var(--a106-ease);
 transition-delay: calc(var(--st-i, 0) * 70ms);
}
.st-promise-grid li.is-in { opacity: 1; transform: none; }
.st-promise-grid strong {
 font-family: var(--a106-font-display);
 font-size: 1.15rem;
 color: var(--a106-drip-deep);
}
.st-promise-grid span { color: var(--a106-mute); font-size: 0.92rem; }

.st-aisle-row {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
}
.st-aisle {
 display: flex;
 align-items: center;
 gap: var(--a106-space-2);
 min-height: 72px;
 padding: 14px var(--a106-space-2);
 text-decoration: none;
 font-family: var(--a106-font-body);
 font-weight: 800;
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard-sm);
 color: #fff;
 transition: transform 180ms var(--a106-ease), box-shadow 180ms var(--a106-ease);
}
.st-aisle:hover { transform: translate(-2px, -2px); color: #fff; box-shadow: 5px 5px 0 var(--a106-soil); }
.st-aisle:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--a106-soil); }
.st-aisle:focus-visible { outline: 3px solid var(--a106-sprout); outline-offset: 2px; }
.st-aisle--drip { background: var(--a106-drip); }
.st-aisle--clay { background: var(--a106-clay); }
.st-aisle--sprout { background: var(--a106-sprout); color: var(--a106-sprout-ink); }
.st-aisle--sprout:hover { color: var(--a106-sprout-ink); }
.st-aisle--bloom { background: var(--a106-bloom); }
.st-aisle-mark {
 width: 14px;
 height: 18px;
 border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
 background: rgba(255,255,255,0.35);
 border: 2px solid rgba(0,0,0,0.2);
}

.st-parade-head {
 display: flex;
 flex-wrap: wrap;
 align-items: end;
 justify-content: space-between;
 gap: 16px;
 margin-bottom: 18px;
}
.st-parade-head h2 { margin: 0; }
.st-parade-track {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 14px;
}
.st-packet {
 display: grid;
 gap: 10px;
 text-decoration: none;
 color: var(--a106-ink);
 background: var(--a106-surface);
 border: 2px solid var(--a106-soil);
 border-radius: var(--a106-radius);
 box-shadow: var(--a106-hard-sm);
 overflow: hidden;
 transition: transform 180ms var(--a106-ease), box-shadow 180ms var(--a106-ease);
}
.st-packet:hover {
 transform: translate(-2px, -2px);
 box-shadow: 6px 6px 0 var(--a106-soil);
}
.st-packet:focus-visible { outline: 3px solid var(--a106-sprout); outline-offset: 2px; }
.st-packet-media {
 aspect-ratio: 1;
 overflow: hidden;
 background: var(--a106-kraft);
}
.st-packet-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 500ms var(--a106-ease);
}
.st-packet:hover .st-packet-media img { transform: scale(1.05); }
.st-packet-copy {
 display: grid;
 gap: 4px;
 padding: 0 12px 14px;
}
.st-packet-copy strong {
 font-size: 0.95rem;
 line-height: 1.3;
 color: var(--a106-ink);
}
.st-packet-copy em {
 font-style: normal;
 font-weight: 800;
 color: var(--a106-clay);
}

.st-finale {
 background:
 linear-gradient(135deg, var(--a106-drip) 0%, #075F7C 45%, var(--a106-clay) 100%);
 color: #fff;
 padding: clamp(48px, 8vw, 80px) 0;
}
.st-finale-inner { max-width: 40rem; }
.st-finale h2 {
 margin: 0 0 10px;
 font-family: var(--a106-font-display);
 font-size: clamp(1.9rem, 3.4vw, 2.7rem);
 font-weight: 600;
 color: #fff;
}
.st-finale p {
 margin: 0 0 20px;
 color: #F2F8F4;
 font-size: 1.05rem;
}

@media (max-width: 1100px) {
 .st-promise-grid,
 .st-parade-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .st-aisle-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
 .st-stage {
 grid-template-columns: minmax(0, 1fr);
 min-height: auto;
 padding-top: var(--a106-space-3);
 padding-bottom: var(--a106-space-4);
 }
 .st-pot { justify-self: center; width: min(100%, 360px); }
}
@media (max-width: 720px) {
 .st-parade-head { align-items: stretch; }
 .st-parade-head .st-cta { width: 100%; }
}
@media (max-width: 560px) {
 .st-promise-grid,
 .st-parade-track,
 .st-aisle-row { grid-template-columns: minmax(0, 1fr); }
 .st-cta-row { flex-direction: column; }
 .st-cta { width: 100%; min-width: 0; }
 .st-brand-bot { text-shadow: 3px 3px 0 var(--a106-sprout); }
 .st-section { padding: var(--a106-space-5) 0; }
}

@media (prefers-reduced-motion: reduce) {
 .st-brand[data-st-unroll] .st-brand-bot,
 .st-bead { animation: none; }
 .st-promise-grid li { opacity: 1; transform: none; }
}