/* N010 Rootline Citrus - phone layout. Loaded after style.css; same assets, same effects, only layout changes. */
.site{padding:72px var(--gutter) 0;gap:var(--s3)}
.menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 16px;border-radius:var(--pill);border:1px solid var(--line-strong);font-weight:600;background:color-mix(in oklab,var(--c1) 70%,transparent)}
.menu-btn:active{transform:scale(.97)}
.menu-btn[aria-expanded=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu{position:sticky;top:0;z-index:20;margin:var(--s2) var(--gutter) 0;padding:var(--s3);border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--spec);display:grid;gap:var(--s3)}
.menu[hidden]{display:none}
.menu nav{display:grid}
.menu nav a{display:flex;align-items:center;min-height:52px;padding:0 var(--s2);border-bottom:1px solid var(--line);text-decoration:none;font:700 1.35rem/1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.menu .btn{width:100%}

.hero{display:flex;flex-direction:column;min-height:auto;padding:0;gap:var(--s3)}
.hero-copy{display:contents}
.hero-copy>*{margin-inline:var(--gutter)}
.hero-copy>.tag{order:1;margin-top:var(--s5)}
.title{order:2;font-size:clamp(2.7rem,12.5vw,4.2rem)}
.hero-copy .lead{order:6;font-size:1.05rem}
.hero-stage{order:3;height:clamp(270px,44svh,400px);min-height:0;margin:0 0 calc(var(--s2) * -1)}
.switch-dock{order:4}
.hero-cta{order:7}
.switch{display:grid;grid-template-columns:repeat(3,auto);width:100%}
.sw{justify-content:center;padding:0 4px;gap:7px;min-height:48px;font-size:.94rem;white-space:nowrap}
.sw-dot{flex:none}
.sw-k{display:none}
.hero-cta .btn{flex:1 1 auto}
.hero-stage .gesture{bottom:var(--s1)}
.ring{width:min(84%,58svh)}
.spec{order:7;grid-template-columns:1fr 1fr;margin:0 var(--gutter)}
.spec>div{padding:var(--s3) var(--s3) var(--s3) 0;border-right:0;border-bottom:1px solid var(--line)}
.spec>div+div{padding-left:0}
.spec>div:nth-child(even){padding-left:var(--s3);border-left:1px solid var(--line)}
.spec dd{font-size:1rem}

.sec-head{margin-bottom:var(--s6)}
.fruit-in{grid-template-columns:1fr;gap:var(--s6)}
.xsec{width:min(100%,320px)}
.uses li{font-size:1.15rem}
.steps{grid-template-columns:1fr}
.step{grid-template-columns:auto 1fr;column-gap:var(--s3);padding:var(--s4) 0;border-right:0;border-bottom:1px solid var(--line)}
.step+.step{padding-left:0}
.step .step-n{grid-row:1 / 3}
.step .step-i{display:none}
.step .h3,.step .body{grid-column:2}

.ledger,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block}
.ledger thead{display:none}
.ledger tr{display:grid;grid-template-columns:1fr auto;gap:4px var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.ledger th,.ledger td{padding:0;border:0}
.ledger tbody th{font-size:1.25rem;grid-column:1}
.ledger td:nth-child(2){grid-column:1 / -1;grid-row:2}
.ledger td:nth-child(3){grid-row:3;font-size:var(--fs-sm)}
.ledger .price{grid-column:2;grid-row:1;text-align:right}
.ledger td:last-child{grid-column:2;grid-row:3;text-align:right}

.reserve-in{grid-template-columns:1fr;gap:var(--s6)}
.reserve-copy{position:static}
.form{padding:var(--s4)}
.row2{grid-template-columns:1fr}
.submit{justify-self:stretch}

.foot-in{grid-template-columns:1fr}
.foot-nav{justify-self:start}